Percent Progress

Show percentage text alongside the progress bar using the onTaskProgress callback to update a custom percent label in real time.

new MultipleUpload(document.getElementById('demo-percent-progress'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onTaskProgress: function(task) {
 var el = document.getElementById('percent-display');
 el.textContent = task.fileName + ': ' + Math.round(task.progress) + '%';
 },
 onComplete: function() {
 document.getElementById('percent-display').textContent = 'All uploads complete!';
 }
});

Reading the number yourself

onTaskProgress hands you the task on every progress tick, with the percentage on task.progress. That is all a custom percentage readout needs — no polling, no timers, and no reaching into the component's DOM.

A number is not always the better display

A percentage is precise and, on a slow upload, unhelpfully static: 34% for ninety seconds looks identical to a stall. Pairing it with a bar, a transfer rate or an estimate gives the user something that visibly changes, which is what reassures them the upload is alive.