Issue in a for loop, get only the last item [duplicate]

Question

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 1

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);