Downloading a Blueimp file, how do you know which file the progress callback belongs to?

Question

How do I know which file the progress callback belongs to?

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

So, I am doing a for loop to process each file in the add callback, no problem.

However, now I am updating the progress callback, and I see no way to find out which file is progressing. The callback receives 2 parameters: "e" and "data", and the data object is loaded and the general values ​​that give me progress ... but for what file? Some processing callbacks have data.index to tell you which file it is, but the download progress does not have this.

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

My code is ugly right now because I'm trying to solve these new problems with IE10. Prior to this, I simply expected that the data.files array was always just one element. Here is my code anyway, I will try to clear it 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 the markup jquery object that you could create 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 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); } })