HTML5 file uploading with multiple progress bars

Question

I'm uploading multiple files via XmlHTTPRequest and HTML5. I have the uploading working fine, but I would like to have a progress bar for each file upload going on. The code I have, however, uses the last progress bar for ALL of the file uploads instead of each upload using its own progress bar. So this is mostly visual on the client-side, but it's really annoying me. For some reason I'm assuming that the event that attaches the progress of the file upload overwrites itself and uses the last progress bar. Here's my code:

var files = event.dataTransfer.files;

    // iterate over each file to upload, send a request, and attach progress event
    for (var i = 0, file; file = files[i]; i++) {
        var li = $("<li>" + file.name + "<div class='progressbar'></div></li>");

        // add the LI to the list of uploading files
        $("#uploads").append(li);

        // fade in the LI instead of just showing it
        li.hide().fadeIn();

        var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener('progress', function(e) {
                var percent = parseInt(e.loaded / e.total * 100);
                li.find(".progressbar").width(percent);
            }, false);

            // check when the upload is finished
            xhr.onreadystatechange = stateChange;

            // setup and send the file
            xhr.open('POST', '/attachments', true);
            xhr.setRequestHeader('X-FILE-NAME', file.name);
            xhr.send(file);
        }

I'm assuming that the proper "li" is not getting read properly by the "progress" event. I suspect there's some sort of binding I have to do to tell the "progress" event to use a particular variable as it's "li", but I'm not sure what I'm missing.

Molecular Man · Accepted Answer · 2011-07-18 06:18:52Z

19

Your example doesn't work properly becourse you don't take into account that xhr progress event is fired when all list items had been already created. However there are a lot of ways to make your example work. The idea is to let xhr know what exactly list item it is dealing with. For example use this code (I didn't check if it works. The purpose of this code is to describe the idea):

var xhr = new XMLHttpRequest();
xhr.upload.li = li;
xhr.upload.addEventListener('progress', function(e) {
    var percent = parseInt(e.loaded / e.total * 100);
    this.li.find(".progressbar").width(percent);
}, false);

answered Jul 18, 2011 at 6:18

Molecular Man

22.4k3 gold badges74 silver badges90 bronze badges

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

Comments

DaveShaw · Accepted Answer · 2012-01-13 22:56:12Z

7

I think I found a solution for this problem. It looks working on some of my tests. I'm not very good at english thus I'll just share my sample script. If you ask any question, I'll try to explain more :)

// This is input object which type of file.  
var uploader = document.getElementById("fileUploader"); 

// We'll send a new post for each file.
for(var i=0, j=uploader.files.length; i<j; i++)
{
    var uploaderForm = new FormData(); // Create new FormData
    uploaderForm.append("action","upload"); // append extra parameters if you wish.
    uploaderForm.append("up_file",uploader.files[i]); // append the next file for upload

    var xhr = new XMLHttpRequest();

    xhr.addEventListener("loadstart", function(e){
        // generate unique id for progress bars. This is important because we'll use it on progress event for modifications
        this.progressId = "progress_" + Math.floor((Math.random() * 100000)); 

        // append progress elements to somewhere you want
        $("body").append('<div id="' + this.progressId + '" class="myCustomProgressBar" ></div>');
    });
    xhr.addEventListener("progress", function(e){
        var total = e.total;
        var loaded = e.loaded;
        var percent = (100 / total) * loaded; // Calculate percentage of loaded data

        // I animate progress object. Notice that i use "this.progressId" which i created on loadstart event.
        $("#" + this.progressId).animate({"width":300 * (percent / 100)}, 800);
    });

    xhr.open("POST","index.php");
    xhr.send(uploaderForm);
}

edited Jan 13, 2012 at 22:56

DaveShaw

52.9k18 gold badges118 silver badges142 bronze badges

answered Jan 13, 2012 at 22:21

Mehmet Hazar Artuner

771 silver badge5 bronze badges

4 Comments

Pluto Over a year ago

Fantastic, thanks! I originally tried adding all the files to a queue in an array, but that wouldn't work. Just referencing the files from the file input works great though :D You helped me create this: userscripts.org/scripts/show/158420

Jon Hargett Over a year ago

As this example shows, if you want to have separate progress bars for each file, you have to have a separate XHR for each file instead of having one XHR with all files appended to it. I was hoping that the progress event would have some meta data on it that indicated which file the event was providing stats for.

maylon Over a year ago

For me does not worked xhr.addEventListener("progress", function(e){}), had to use xhr.upload.onprogress = function(e){}

jhenrique Over a year ago

@Mehmet, I tried to run your code, but i'm having an issue with the progress bars. It seens that the progress bars are in a loop, they start increasing, then after 100% it starts decreasing back to 0% and keep, going back and forth like 0% to 100% to 0%. Could you give me a help? Regards

Collectives™ on Stack Overflow

HTML5 file uploading with multiple progress bars

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related