Custom Progress UI

var panel = document.getElementById('cp-panel');

new MultipleUpload(document.getElementById('demo-custom-progress'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onTaskStart: function(task) {
 panel.style.display = '';
 document.getElementById('cp-name').textContent = task.fileName;
 },
 onTaskProgress: function(task) {
 document.getElementById('cp-fill').style.width = task.progress + '%';
 document.getElementById('cp-pct').textContent = Math.round(task.progress) + '%';
 document.getElementById('cp-speed').textContent =
 MultipleUpload.formatSize(task.speed) + '/s';
 document.getElementById('cp-eta').textContent =
 'ETA: ' + MultipleUpload.formatTime(task.eta);
 document.getElementById('cp-bytes').textContent =
 MultipleUpload.formatSize(task.uploadedBytes) + ' / ' +
 MultipleUpload.formatSize(task.fileSize);
 },
 onComplete: function() {
 document.getElementById('cp-pct').textContent = 'Done!';
 }
});

Your own indicator

The task callbacks give you start, progress and completion, which is everything an indicator needs. Nothing requires you to use the built-in bar — drive a component from your own design system instead.

Cover the whole lifecycle

A custom indicator usually handles uploading and complete, and forgets paused, retrying and failed. Those are the states where the user most needs to be told what is happening, and an indicator that silently stops moving is worse than none at all.