I've been recommended to use jQuery file upload by blueimp.
But I fail to update the individual file progress. I understand how the combined progress works (as documented)
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
console.log(progress);
}
How to do the same thing for every single upload? How do I retrieve the DOM element (progressbar) linked to this particular upload? I was thinking about creating an id by filename and file size, but as users could upload the same file twice (to different destinations) this doesn't work.
This is my implementation at the moment:
$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data)
{
$.each(data.result.files, function (index, file)
{
//$('<p/>').text(file.name).appendTo(document.body);
//console.log('done with '+file.name);
});
},
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
//$('#progress .bar').css('width', progress + '%');
//console.log(progress);
}
}).on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
var node = $('<div class="progressBox"></div>');
node.append('<div class="progressBoxBack"></div>');
node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0% 0 ko/s 0 sec left</span></p>');
node.append('<div class="progressBar"><div style="width:23%;"></div></div>');
node.appendTo($('#progressContainer'));
});
});
Can anybody tell me how or point me to documentation I haven't been able to find?
Solution
To identify the upload, you can add additional parameters to the file object when added. the file object stays the same in the progress event (But not in the done method) So on fileuploadadd:
.on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
file.uploadID = 'someidentification' ;
});
});
then when you handle progress:
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(data.files[0].uploadID); // returns 'someidentification'
}
I've been recommended to use jQuery file upload by blueimp.
But I fail to update the individual file progress. I understand how the combined progress works (as documented)
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .bar').css('width', progress + '%');
console.log(progress);
}
How to do the same thing for every single upload? How do I retrieve the DOM element (progressbar) linked to this particular upload? I was thinking about creating an id by filename and file size, but as users could upload the same file twice (to different destinations) this doesn't work.
This is my implementation at the moment:
$('#fileupload').fileupload(
{
dataType: 'json',
done: function (e, data)
{
$.each(data.result.files, function (index, file)
{
//$('<p/>').text(file.name).appendTo(document.body);
//console.log('done with '+file.name);
});
},
progressall: function (e, data)
{
var progress = parseInt(data.loaded / data.total * 100, 10);
//$('#progress .bar').css('width', progress + '%');
//console.log(progress);
}
}).on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
var node = $('<div class="progressBox"></div>');
node.append('<div class="progressBoxBack"></div>');
node.append('<p><span class="progress-filename">'+file.name+' ('+index+')</span><br /><span class="progress-info">0% 0 ko/s 0 sec left</span></p>');
node.append('<div class="progressBar"><div style="width:23%;"></div></div>');
node.appendTo($('#progressContainer'));
});
});
Can anybody tell me how or point me to documentation I haven't been able to find?
Solution
To identify the upload, you can add additional parameters to the file object when added. the file object stays the same in the progress event (But not in the done method) So on fileuploadadd:
.on('fileuploadadd', function (e, data)
{
$.each(data.files, function (index, file)
{
file.uploadID = 'someidentification' ;
});
});
then when you handle progress:
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
console.log(data.files[0].uploadID); // returns 'someidentification'
}
3 Answers
Reset to default 3According to the documentation there is a single progress event :
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
},
...
I understand this is an old question but it comes up quite high in the Google Search results on this topic and the answer provided may be more complicated than required for the standard use case.
The data object provides a context property which you can set when you add the file to tie a DOM element to that particular file upload. This is passed around and is available in the done callback and you can simply use it to affect the progress within the linked DOM element.
$("#fileupload").fileupload({
...
add: function (e, data) {
data.context = $('<p/>').text('Uploading...').appendTo(document.body);
data.submit();
},
...
progress: function (e, data) {
var progress = parseInt(data.loaded / data.total * 100, 10);
data.context.text(progress + '%');
}
});
In php (from version 5.4 and up) there is something called session upload progress. It allows you to monitor upload progress on individual files.
It can be pretty cumbersome to get it running but you can find some examples on how to combine it with jquery in your XMLHttpRequest / Ajax request when you search in Google.
It is also mentioned here in the documentation of the jquery file upload plugin