Aggregate Progress

Show overall aggregate progress across all files using the onProgress callback, which provides total bytes uploaded and remaining.

0% 0 / 0

new MultipleUpload(document.getElementById('demo-aggregate'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onProgress: function(progress) {
 document.getElementById('agg-bar-fill').style.width = progress.percent + '%';
 document.getElementById('agg-pct').textContent = Math.round(progress.percent) + '%';
 document.getElementById('agg-bytes').textContent =
 MultipleUpload.formatSize(progress.uploadedBytes) + ' / ' +
 MultipleUpload.formatSize(progress.totalBytes);
 }
});

One number for the whole queue

Overall progress is bytes transferred across every file, weighted by size — not the average of the individual percentages. That distinction is the difference between a bar that tracks reality and one that misleads.

Why averaging goes wrong

Take one 2 GB video and nine 100 KB images. Averaging percentages puts the bar at 90% the moment the images finish, and then it sits there for several minutes while the video — which is essentially the entire job — uploads. Weighting by bytes shows roughly 0.5%, which is unflattering and correct.