Get upload progress of individual files with XMLHttpRequest

Question

I'm using XMLHttpRequest (with jQuery) to get the upload progress of multiple files. By adding a "progress" event listener to the XMLHttpRequest object I can get event.loaded and event.total. Those variables give me the loaded and total bytes of all the files combined.

What I'd like to do is get the progress of each individual file, but from what I can see that information isn't available with XMLHttpRequest. Is that true?

I don't think this is even necessary, but here's my code:

var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
    xhr.upload.addEventListener('progress', function(event) {
        var percent = 0;
        var position = event.loaded || event.position;
        var total = event.total;
        if (event.lengthComputable) {
            percent = Math.ceil(position / total * 100);
        }
        updateProgressBar(percent);
    }, false);
}
return xhr;

If I can accomplish this with XMLHttpRequest that would be great. Any info on this would be appreciated.

Take a look at this: How to get progress from XMLHttpRequest — Joe
Thanks, but my script already does that. What I mean is I want the progress for each individual file, not all the files as a group. — Gavin
It appears as though the $.ajaxSettings.xhr() object is global. You're not creating a unique instance of it, so how will it know which file you're referring to? — Gavin
@Gavin you will have to run $.post() or $.ajax() for each file you want to upload. That is the only way to get individual progress events for the files. The progress event is related to the full XMLHttpRequest, it doesn't know or care about how many different "parts" or "files" are being uploaded; To the XHR, it's just binary. So to be able to know the progress of individual files you must only include a single file per request. — idbehold

Balaji Viswanath Balaji Viswanath · Accepted Answer · 2014-10-03T15:37:16

This is what i use,

$.ajax({
    xhr: function () {
        myXhr = $.ajaxSettings.xhr();
        myXhr.addEventListener('progress', function (e) { }, false);
        if (myXhr.upload) {
            myXhr.upload.onprogress = function (e) {
                var completed = 0;
                if (e.lengthComputable) {
                    var done = e.position || e.loaded,
                        total = e.totalSize || e.total;
                    completed = Math.round((done / total * 1000) / 10);
                }
                console.log(completed); // Displays the completed percentage
            }
        }
        return myXhr;
    }
});

Get upload progress of individual files with XMLHttpRequest

2 Answers