Blueimp file upload, how do you know which file the progress callback is for?

Question

How do you know which file the progress callback is for?

Even though I set sequentialUploads to true, in IE10 only (not Chrome/FireFox/Safari), when I select multiple files to upload at the same time, the data.files array in the add callback contains multiple files. With all other browsers, the add callback is called once for each file, the array is always just 1 file.

So I do a for loop to handle each file in the add callback, no problem.

However, now I'm updating the progress callback, and I don't see any way to know which file the progress is for. The callback gets 2 parameters, "e" and "data", and the data object has loaded and total values that give me the progress... but for which file? Some of the processing callbacks have data.index to tell you which file it is, but the upload progress doesn't have that.

Is this just missing feature, or am I missing something?

My code is kind of ugly right now because I'm trying to resolve these new IE10 issues. Prior to this I was just counting on the fact that the data.files array was always just 1 item. Here is my code anyway, I'll try to clean it up when I have a chance:

self.initFileUpload = function(elem) {
         $(elem).fileupload({
             dataType: 'json',
             global: false,
             sequentialUploads: true,
             forceIframeTransport: !!ie,
             formData: { hostSID: app.viewModels.main.hostSID() },
             done: function(e, data) {
                 for (var x = 0; x < data.result.files.length; x++) {
                     var file = data.result.files[x];
                     var u = file.myObj;
                     u.sid = file.sid;
                     console.log("done: " + u.filename);
                     u.done(true);
                 }
             },
             add: function(e, data) {
                 for (var x = 0; x < data.files.length; x++) {
                     var file = data.files[x];
                     var u = [];
                     u.filename = file.name;
                     u.size = file.size;
                     u.perc = ko.observable(0);
                     u.error = ko.observable("");
                     u.done = ko.observable(false);
                     var ext = file.name.split('.').pop().toLowerCase();
                     u.image = utils.isImageExt(ext);
                     self.uploads.push(u);
                     file.myObj = u;
                     u.jqXHR = data.submit();
                 }
             },
             fail: function(e, data) {
                 for (var x = 0; x < data.result.files.length; x++) {
                     var file = data.result.files[x];
                     var u = file.myObj;
                     if (data.jqXHR && data.jqXHR.responseText)
                         u.error(data.jqXHR.responseText);
                     else
                         u.error("Unknown Error");
                     console.log("fail: " + u.filename);
                 }
             },
             progress: function(e, data) {
                 console.log(e);
                 console.log(data);
                 for (var x = 0; x < data.files.length; x++) {
                     var file = data.files[x];
                     console.log(file);
                     var u = file.myObj;
                     u.perc(parseInt(file.loaded / file.total * 100, 10));
                     console.log("perc: " + u.filename + " " + u.perc());
                 }
             },
             progressall: function(e, data) {
                 self.uploadPerc(parseInt(data.loaded / data.total * 100, 10));
             }
         });
     }

Answer 1

The 'fileuploadprogress' callback includes data.context. This is a jquery object of the markup that you might have created in the 'fileuploadadd' callback.

You can add a progress element (or any other markup to provide feedback) in the 'fileuploadadd' callback, then find it again in the 'fileuploadprogress' and set the progress:

.on('fileuploadadd', function (e, data) {
    $.each(data.files, function (index, file) {
        data.context = $('<div/>', { class: 'pull-left text-center media_wrapper' }).appendTo('#thumbnails');
        $('<progress>', { value: '0', max: '100'}).appendTo(data.context)
    });
})
/* ... */
.on('fileuploadprogress', function (e, data) {
    if (data.context) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        data.context.find('progress').attr('value', progress);
    }
})