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.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    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