Why Is This Filereader Onload Not Firing?

I am starting with this working JavaScript code: // Begin File Open Code. function fileOpen() { var fileInput = document.getElementById('fileInput'); var fileDispl

Solution 1:

There appears to be a bug in Chrome 73 where it isn't fired if you have a debugger statement.

I literally have

        reader.readAsText(blob); 
        debugger;

and it never hits the onload

If I change it to

debugger;
        reader.readAsText(blob); 

then it works.

Fixed by Chrome 75.

Solution 2:

You can also use FileReader.readAsDataURL() to parse the file from your . This will create a string in memory containing a base64 representation of the image.

<inputtype="file"accept="image/*"onchange="loadFile(event)"><imgid="output"/><script>var loadFile = function(event) {
    var reader = newFileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>

Ref: Preview an image before it is uploaded