Vfrdtyky

I try to read files uploaded by a input type file (multiple). The code is the following:

$(document).ready(function() {

  $('#convert').on('click', function() {

     var files=$('#files')[0].files;

     if (!files) return;

     for (var i=0; i<files.length; i++) {

       var file=files[i];

       fr = new FileReader();

       fr.onload = (function(received) {      

         var note=$(fr.result);

       });

       fr.readAsText(file);

     }

  });

});

Now my problem is:
The "onload" - function is called even before the file is loaded. note never has any content. But when I put a breakpoint just before the note - line and wait a while, note gets the content.

So it seems, the onload()-event is called too early. What can I do about that?

(Browser is Chrome)

I replaced fr.result by this.result:

fr.onload = (function() {      

  var note=$(this.result);

});

That did the trick

You are making fr a global variable and at the time the onload fires it will be a different object than you expect due to the loop

Try wrapping it in an IIFE to create a closure and making fr a local variable

for (var i = 0; i < files.length; i++) {  

  (function(file) {

    var fr = new FileReader();

    fr.onload = function(received) {

      var note = $(fr.result);// not sure what intent is here

    };

    fr.readAsText(file);

  })(files[i])

}