XHR multiple file upload with progressbar

Question

I'm uploading files via an input type="file" and an XHR request. Uploads proceed very well. The problem is, I can't update my progress bars with onprogress. It works well if I upload only one file, but since there's more than one, there is only one progress bar being updated, the others simply just don"t work. It might come from the for loop, but I don't see how I may fix this If anyone has an idea, that'd be great !

Here's the code:

$('input').change(function() {

var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'];   
var filesLen = this.files.length;
var fileInput = document.querySelector('#file');

for (i = 0; i < filesLen; i++)
{
    var vidType = this.files[i].name.split('.');

    if (allowedTypes.indexOf(vidType[vidType.length -1].toLowerCase()) != -1)
    {
        var progress = 'progress' + i;

        $('input').before('<p>' + this.files[i].name + ' <progress id="' + progress + '"></progress></p>');

        var xhr = new XMLHttpRequest();

        xhr.open('POST', '/upload/');

        xhr.upload.onprogress = function(e) 
        {
            $('#' + progress).attr('value', e.loaded);
        $('#' + progress).attr('max', e.total);
        };

        xhr.onload = function()
        {
            console.log('upload complete');
        };

        var form = new FormData();
        form.append('title', this.files[i].name);
        form.append('pict', fileInput.files[i]);

        xhr.send(form);

    }

    else
    {
        alert('Your file "' + this.files[i].name + '" \'s format isn\'t supported');    
    }
}

possible duplicate of Javascript infamous Loop problem?

Dagg Nabbit
– Dagg Nabbit

2012-10-03 16:51:27 +00:00
Commented Oct 3, 2012 at 16:51 — Dagg Nabbit
– Dagg Nabbit, Commented Oct 3, 2012 at 16:51

Community · Accepted Answer · 2017-05-23 12:06:12Z

8

This is the "infamous loop problem."

The problem is here:

xhr.upload.onprogress = function(e) 
{
    $('#' + progress).attr('value', e.loaded);
    $('#' + progress).attr('max', e.total);
};

When this function runs, progress will be whatever it was when the loop exited, not what it was at the point in the loop where the function was defined. Try replacing that code with something like this:

(function(progress) { 
    xhr.upload.onprogress = function(e) 
    {
        $('#' + progress).attr('value', e.loaded);
        $('#' + progress).attr('max', e.total);
    };
}(progress));

More: Javascript infamous Loop issue?

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 3, 2012 at 16:47

Dagg Nabbit

77k19 gold badges115 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Buzut Over a year ago

It works, thank you so much ! I'm quite new to JS and i had never heard of this "infamous loop problem". Now after a quick research, i have weel understood the issue : "JavaScript's scopes are function-level, not block-level, and creating a closure just means that the enclosing scope gets added to the lexical environment of the enclosed function." That's why an anonymous function gets rid of this infamous loop problem. Thank you again, you've just released me from a big headache !

Collectives™ on Stack Overflow

XHR multiple file upload with progressbar

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related