parameter is not of type 'Blob'

Question

I have written the code below to display the text from a local file using the file API but when I click the button, nothing happens. I get the following error when I inspect

Answer 1

To save the File content in innerHtml, you must first read the file. loadend event fires only when file is fully read, and you can access its content without errors:

var reader = new FileReader();
var fileToRead = document.querySelector('input').files[0];

// attach event, that will be fired, when read is end
reader.addEventListener("loadend", function() {
   // reader.result contains the contents of blob as a typed array
   // we insert content of file in DOM here
   document.getElementById('file').innerText = reader.result;
});

// start reading a loaded file
reader.readAsText(fileToRead);

You can read more here - and here