CODEWITHSUNDEEP
javascript
user34537
user34537

Reputation:

Incorrect variable when calling callback in JS

I am getting the wrong filename in the following code. I'm sure its obvious what the mistake is but i dont see it. I get the correct amount of errors however all the filename are the same rather then the filename in error.

for(var i=0; i<this.files.length; ++i){
    var f = this.files[i];
    var reader = new FileReader();
    reader.onload = function(e) {
        if(e.total>maxFilesize){
            tooBigFilesLs.push(f.name);

Upvotes: 1

Views: 245

Answers (2)

vtortola
vtortola

Reputation: 35905

Javascript Closures

There is just an example about it in that article in "Creating closures in loops: A common mistake"

Try with this:

for(var i=0; i<this.files.length; ++i){
    var f = this.files[i];
    var reader = new FileReader();

    (function(name){

        reader.onload = function(e) {
            if(e.total>maxFilesize){
                    tooBigFilesLs.push(name);
        }
    }
     }(f.name));
}

(not tested)

Basically, when you define that function on 'onload', you are creating a closure, and all the functions you create in that loop share it, so all the functions has access to 'f' and 'reader', so 'f' will remain pointing to the last file in the loop. Adding the anonymous closure in my example, using that 'name' parameter, you ensure that the function in the 'onload' gets the right name.

Upvotes: 2

Gabe
Gabe

Reputation: 50493

I think this is a closure issue with your for loop.

Here is an example of how to handle it.

// Basic idea...

reader.onload  = (function(value) {
    return function() {
        alert(value);
    }
})(f.name);

Upvotes: 2

Related Questions