mm1975 mm1975 - 10 days ago 6
Javascript Question

Issue in a for loop, get only the last item

I´m using fileReader to read the content of all selected files. After reading them with the fileReader API, I append the content to the DOM. That works perfectly.
It creates one p element per file.

Now I want to store each file content to local storage as well. Unfortunately, It stores only the last item. What´s going wrong? Thank you for your tips.

JS

$("input[name='uploadFile[]']").on("change", function() {

var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader)
return;

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

(function(file) {
var name = file.name;
var reader = new FileReader();
reader.onload = function(e) {
var textObject = event.target.result.replace(/\r/g, "\n");
var textHTML = event.target.result.replace(/\r/g, "<br/>");

var text = e.target.result;
var p = document.createElement("p");
p.innerHTML = textHTML;
$('#results').append(p);
localStorage.setItem('letter'+ i, JSON.stringify(textObject));
};

reader.readAsText(file, 'ISO-8859-1');
})(files[i]);

}

});

Answer

The problem is that, by the time the onload is fired, i has been changed by the loop. This means that localStorage.setItem('letter'+ i will always refer to the last element in the array. You actually have the correct fix already in place -- the immediately invoked function expression -- but you need to add i as a parameter as well.

    (function(file, index) {
        var name = file.name;
        var reader = new FileReader();
        reader.onload = function(e) {
            var textObject = event.target.result.replace(/\r/g, "\n");
            var textHTML = event.target.result.replace(/\r/g, "<br/>");

            var text = e.target.result;
            var p = document.createElement("p");
            p.innerHTML = textHTML;
            $('#results').append(p);    
            localStorage.setItem('letter'+ index, JSON.stringify(textObject));
        };

        reader.readAsText(file, 'ISO-8859-1');
    })(files[i], i);