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>