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.

score 2 · Answer 1 · answered Apr 16 '19 at 08:20

2

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.

answered Apr 16 '19 at 08:20

Simon_Weaver

140,023
84
646
689

Wooowwwwww!! Great!!!! Getting mad with this and you are on the target!! Thanks mate – Kenzo_Gilead Apr 25 '19 at 09:01
I reported and they confirmed. But it was already fixed - probably accidentally. I’ll post the link later – Simon_Weaver Apr 25 '19 at 16:12
1

@EliasMP and how long did you spend on this one lol. Took me hours to figure out was it angular, was it rxjs, was it my code. Ugh! – Simon_Weaver Apr 25 '19 at 16:59
It was in 1 day x 8 hours per day. But I was doing another project at the same time... Trying this one, and when I didnt figure out keeping doing my stuff... In any case, so much for just 5 lines of code LOL XD XD – Kenzo_Gilead Apr 26 '19 at 07:46

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

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

edited May 23 '17 at 12:02

Community

1
1

answered May 21 '17 at 00:25

Senthil

2,156
1
14
19

I'm loading the image into an HTML5 canvas. Will that work as a base64 string? – TonyLuigiC May 21 '17 at 02:27
Yes, it will . Ref: This example http://stackoverflow.com/questions/13938686/can-i-load-a-local-file-into-an-html-canvas-element – Senthil May 21 '17 at 02:49
6 am here, I will check it out when I can see straight. Thanks. Note: I don't think this will resolve the FIleReader onload issue. – TonyLuigiC May 21 '17 at 09:44
I got the same issue, sometimes works properly, but sometimes not work, even also `onloadend()` not fire any events. – May 23 '17 at 16:23

Why is this FileReader onload not firing?

2 Answers2

Linked