External Progress

Display upload progress in a custom location outside the uploader component.

Ready 0%

No file uploading

Drag & drop files here

var bar = document.getElementById('progressBar');
var label = document.getElementById('progressLabel');

var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 onTaskStart: function(task) {
 label.textContent = 'Uploading: ' + task.name;
 },
 onTaskProgress: function(task, pct) {
 bar.style.width = pct + '%';
 label.textContent = task.name + ' �?' + pct + '%';
 },
 onTaskComplete: function(task) {
 label.textContent = task.name + ' complete!';
 },
 onUploadComplete: function() {
 label.textContent = 'All uploads finished!';
 bar.style.width = '100%';
 }
});