External Progress

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%';
 }
});

Progress somewhere else on the page

The task callbacks let you drive an indicator that is nowhere near the uploader: a bar in a fixed header, a badge on a nav item, a percentage in the document title so it is visible even on another tab.

Do not lose the per-file detail

A single external number is a summary, and a summary cannot say which of twenty files failed. Keep the queue reachable — even collapsed behind the indicator — so that a user who sees “18 of 20” has somewhere to go to find out about the other two.