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?