Per-File Progress
Individual progress bars for each file in a multi-file upload. Track the status of every file independently.
What you should see: one bar per file rather than one for the queue, so a single slow file is visible instead of being averaged away. The cap is 50 MB per file.
<div id="my-uploader"></div>
<div id="file-list"></div>
<script>
CoreUpload.create('#my-uploader', {
uploadUrl: '/api/upload/upload',
multiple: true,
autoUpload: true,
maxFileSize: '50MB',
onFileAdded: function(file) {
var el = document.createElement('div');
el.id = 'file-' + file.id;
el.innerHTML =
'<div style="display:flex;justify-content:space-between">' +
'<span>' + file.name + '</span>' +
'<span class="pct">0%</span></div>' +
'<div style="height:8px;background:#e2e8f0;border-radius:9999px;overflow:hidden">' +
'<div class="bar" style="height:100%;width:0%;background:#0891b2;transition:width 0.2s"></div></div>';
document.getElementById('file-list').appendChild(el);
},
onTaskProgress: function(file, percent) {
var el = document.getElementById('file-' + file.id);
if (el) {
el.querySelector('.bar').style.width = percent + '%';
el.querySelector('.pct').textContent = Math.round(percent) + '%';
}
},
onTaskComplete: function(file) {
var el = document.getElementById('file-' + file.id);
if (el) {
el.querySelector('.bar').style.background = '#10b981';
el.querySelector('.pct').textContent = 'Done';
}
}
});
</script>A bar per row
Each file reports its own progress, so a queue of any length can show which one is slow. One aggregate number cannot answer that, and “which file is holding this up” is the question people actually have.
Show state, not only percentage
Queued, uploading, paused, retrying, complete and failed all look different to the user and should look different on the row. Retrying is the state most often omitted, and it is exactly the one where a static bar makes people think the upload has died.