Why is this FileReader onload not firing?

Question

I am starting with this working JavaScript code:

  // Begin File Open Code. 
  function fileOpen()
  {

    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('iDisplay');

    fileInput.addEventListener('change', function(e)
    {
      file = fileInput.files[0];
      var imageType = /image.*/;
      if (file.type.match(imageType)) 
      {
        var reader = new FileReader();
        reader.onload = function(e)
        {                 
          iDisplay.innerHTML = "";
          image = new Image();
          image.src = reader.result;
          image.id = "I";               // Add an id attribute so the image editor code can access the image.  
          iDisplay.appendChild(image);
          image.onload = function()
          {
            c = document.getElementById("canvas1"); 
            context = c.getContext("2d");
            c.width = image.width; 
            c.height = image.height; 
            context.drawImage(image,0,0);  
          }                
        }
        reader.readAsDataURL(file);             
        moreFiles++;  
        document.getElementById("fileInput").disabled = true; 
        document.getElementById("fileInputD").innerHTML = '<p>Please refresh page to open a new image</p>'; 
      }
      else
      {
        iDisplay.innerHTML = "File type not supported."
      }
  }); 

}
// End File Open Code

And trying to break it up into two separate functions, fileOpen() and loadImage(). The reason is that loadImage will also be used to load default images. I came up with several non-working versions. After reading about the topic here, most recently this answer Javascript FileReader onload not firing I adjusted the code as follows:

  // Begin File Open Code 
  function fileOpen(radio)
  {

    fileInput = document.getElementById('fileInput');
    fileDisplayArea = document.getElementById('iDisplay');

    fileInput.addEventListener('change', function(e)
    {
      file = fileInput.files[0];
      var imageType = /image.*/;
      if (file.type.match(imageType)) 
      {
        reader = new FileReader();
        reader.onload = fileSelected; 
        function fileSelected(e)
        {                 
          iDisplay.innerHTML = "";
          image = new Image();
          image.src = reader.result;
          image.id = "I";               // Add an id attribute so the image editor code can access the image.  
          iDisplay.appendChild(image);
          image.onload = loadImage(); 
        }
      }
      else
      {
        iDisplay.innerHTML = "File type not supported."
            }
    })      
  }         
  // End File Open Code 

  // Begin Load Image Code - This will be used to load a preselected image  
    function loadImage()
    {
        c = document.getElementById("canvas1"); 
        context = c.getContext("2d");
        c.width = image.width; 
        c.height = image.height; 
        context.drawImage(image,0,0);  

        reader.readAsDataURL(file);             
        document.getElementById("fileInput").disabled = true; 
        document.getElementById("fileInputD").innerHTML = '<p>Please refresh page to open a new image</p>'; 
      }
      // End Load Image Code  

But, after reviewing in the Chrome Inspector, the code never gets past

    reader.onload = fileSelected;

After that line, the function exits, and nothing is loaded. I have spent hours on variations of this code and cannot get it to fire past that line. So, my question is "why?" I should note that I want to stay with pure JavaScript.

Thank you in advance.

Answer 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.

Answer 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