Per-File Progress

Individual progress bars for each file in the queue using onQueueRender to build a fully custom queue UI with per-file progress tracking.

new MultipleUpload(document.getElementById('demo-perfile'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onQueueRender: function(tasks, queueEl) {
 var container = document.getElementById('perfile-queue');
 container.innerHTML = '';
 tasks.forEach(function(task) {
 var row = document.createElement('div');
 row.className = 'pf-item';
 row.innerHTML =
 '<span class="pf-name">' + task.fileName + '</span>' +
 '<div class="pf-bar"><div class="pf-bar-fill" style="width:' + task.progress + '%"></div></div>' +
 '<span class="pf-pct">' + Math.round(task.progress) + '%</span>';
 container.appendChild(row);
 });
 }
});