parameter is not of type ‘Blob’

You’ve made a couple of errors.

The one that the error message is complaining about is that you are trying to select a file using a hard coded string. You cannot determine which file gets loaded. The File API will only allow you to read files that are selected by the user via a File input.

The second is that you are trying to read the result property of the reader before you’ve read the file. You need an event handler to do that (because file reading, like Ajax, is asynchronous).

document.getElementById("myBtn").addEventListener("click", function() {

  var reader = new FileReader();
  reader.addEventListener('load', function() {
    document.getElementById('file').innerText = this.result;
  });
  reader.readAsText(document.querySelector('input').files[0]);

});
<input type="file">
<button id="myBtn">Try it</button>
<pre id="file"></pre>

Leave a Comment

tech