Question: 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)

Answer: 
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])
}

```