FileReader onload with result and parameter

Question

I can't manage to get both the result of the filereader and some parameters in a onload function. This is my code:

HTML of control:

<input type="file" id="files_input" multiple/> 

Javascript function:

function openFiles(evt){     var files = evt.target.files;     for (var i = 0; i < files.length; i++) {       var file=files[i];       reader = new FileReader();       reader.onload = function(){           var data = $.csv.toArrays(this.result,{separator:'\t'});       };       reader.readAsText(file);     }   } 

Add event:

 files_input.addEventListener("change", openFiles, false); 

I use the filereader.result, in the onload function. If I use a parameter, like file, for this function, I can't not access to the result anymore. For example I'd like to use file.name in the onload function. How to resolve this issue ?

Answer 1

Try wrapping your onload function in another function. Here the closure gives you access to each file being processed in turn via the variable f:

function openFiles(evt){     var files = evt.target.files;      for (var i = 0, len = files.length; i < len; i++) {         var file = files[i];          var reader = new FileReader();          reader.onload = (function(f) {             return function(e) {                 // Here you can use `e.target.result` or `this.result`                 // and `f.name`.             };         })(file);          reader.readAsText(file);     } } 

For a discussion of why a closure is required here see these related questions:

• JavaScript closure inside loops – simple practical example
• Javascript infamous Loop issue?