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:

Solution 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:

functionopenFiles(evt){
    var files = evt.target.files;

    for (var i = 0, len = files.length; i < len; i++) {
        var file = files[i];

        var reader = newFileReader();

        reader.onload = (function(f) {
            returnfunction(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:

Solution 2:

You should use closure at 'onload' handler. Example: http://jsfiddle.net/2bjt7Lon/

reader.onload = (function (file) { // here we save variable 'file' in closurereturnfunction (e) { // return handler function for 'onload' eventvar data = this.result; // do some thing with data
     }
})(file);

Solution 3:

Use

var that = this;

to access external variables in the function scope.

function(){
    that.externalVariable//now accessible using that.___
}

My scenario - Using Angular 9. I struggled with this for a long time, I just couldn't seem to get it to work. I found the following to be a really elegant solution to access external variables inside a function() block.

public _importRawData : any[];

importFile(file){
    var reader = newFileReader();
    reader.readAsArrayBuffer(file);

    var data;
    var that = this;  //the important bit

    reader.onloadend = awaitfunction(){
        //read data

        that._importRawData = data;  //external variables are now available in the function
    }

One of the important parts in the above code is the var keyword, which scopes variables outside the function block. However, when I accessed the value of data after the function block, it was still undefined as the function executed after the other code. I tried async and await, but could not get it to work. And I could not access data outside of this function.

Baca Juga

The saving grace was the var that = this line. Using that allows external variables to be accessed inside the function. So I could set that variable inside the function scope and not worry about when the code gets executed. As soon as it has been read, it is available.

For the original question the code would be:

functionopenFiles(evt){
    var files = evt.target.files;
    for (var i = 0; i < files.length; i++) {
        var file=files[i];
      
        var that = this; //the magic happens
      
        reader = newFileReader();
        reader.onload = function(){
            var data = $.csv.toArrays(this.result,{separator:'\t'});
          
            that.file.name//or whatever you want to access.
        };
        reader.readAsText(file);
    }
}

Solution 4:

Event handling is asynchronous and thus they pick up the latest value of all the enclosed local variables(i.e. closure). To bind a particular local variable to the event, you need to follow the code suggested by users above or you can look at this working example:-

http://jsfiddle.net/sahilbatla/hjk3u2ee/

functionopenFiles(evt){
  var files = evt.target.files;
  for (var i = 0; i < files.length; i++) {
    var file=files[i];
    reader = newFileReader();
    reader.onload = (function(file){
      returnfunction() {
        console.log(file)
      }
    })(file);
    reader.readAsText(file);
  }
}

#Using jQuery document ready
$(function() {
  files_input.addEventListener("change", openFiles, false);
});

Solution 5:

For Typescript;

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

  var reader = newFileReader();

  reader.onload = ((file: any) => {
    return(e: Event) => {
      //use "e" or "file"
    }
  })(file);

  reader.readAsText(file);
}

JavaScript General