Access for loop data inside eventlistener

Question

I've been trying to create a snippet in order to upload multiple files. The code below works but I need to get my image id in order to clear my filesCollection variable when the user removes the image.

Since the event listener load all files altogether, the variable file.name always show the same value for my dynamically created images.

Any insight that could help me?

Thanks in advance

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

              picReader.addEventListener("load", function (event) {
              var picFile = event.target;
              var div = document.getElementById("uploadboard");

              div.innerHTML = div.innerHTML + "<span class='preview'>
              <img id='"+ file.name +"' src='"+ picFile.result +" '/>
              <button class='remover'></button></span>";
              }

              picReader.readAsDataURL(file);
              filesCollection[file.name] = file;

     }

score 0 · Answer 1 · answered Nov 23 '18 at 02:20

Because of the statement var

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

You can create a function using an approach with IIFE (Immediately Invoked Function Expression)

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

    picReader.addEventListener("load", (function (file) {
            return function(event) {
                var picFile = event.target;
                var div = document.getElementById("uploadboard");

                div.innerHTML = div.innerHTML + "<span class='preview'>
                <img id='"+ file.name +"' src='"+ picFile.result +" '/>
                <button class='remover'></button></span>";
            }
        )(f);
    }

    picReader.readAsDataURL(f);
    filesCollection[f.name] = f;
}

One more alternative is using the statement let

The let statement declares a block scope local variable, optionally initializing it to a value.

for (let i = 0; i < files.length; i++) {
    let file = files[i];   
    let picReader = new FileReader();

    picReader.addEventListener("load", function (event) {           
        let picFile = event.target;
        let div = document.getElementById("uploadboard");

        div.innerHTML = div.innerHTML + "<span class='preview'>
        <img id='"+ file.name +"' src='"+ picFile.result +" '/>
        <button class='remover'></button></span>";
    }

    picReader.readAsDataURL(file);
    filesCollection[f.name] = file;
}

Access for loop data inside eventlistener

1 Answers1