Aggregate Progress

A single progress bar tracking the overall batch progress across all files. Shows total bytes sent vs total bytes.

What you should see: one combined bar for the whole selection, not one per file. Add several files at once and the bar reflects total bytes transferred across all of them; the 50 MB cap applies per file.

Select files to upload

<div id="my-uploader"></div>
<span id="status">Select files to upload</span>
<span id="bytes"></span>
<div id="bar"></div> 
<script>
var totalBytes = 0, uploadedBytes = 0, fileCount = 0, doneCount = 0;

function formatBytes(b) {
 if (b > 1048576) return (b / 1048576).toFixed(1) + ' MB';
 return (b / 1024).toFixed(0) + ' KB';
}

CoreUpload.create('#my-uploader', {
 uploadUrl: '/api/upload/upload',
 multiple: true,
 autoUpload: true,
 maxFileSize: '50MB',
 onFileAdded: function(file) {
 totalBytes += file.size;
 fileCount++;
 },
 onTaskProgress: function(task) {
 // task.uploadedBytes is the running per-file count; diff it against what we
 // last saw for this task to accumulate an accurate queue-wide total.
 task._lastLoaded = task._lastLoaded || 0;
 uploadedBytes += (task.uploadedBytes - task._lastLoaded);
 task._lastLoaded = task.uploadedBytes;
 var pct = (uploadedBytes / totalBytes) * 100;
 document.getElementById('bar').style.width = pct + '%';
 document.getElementById('bytes').textContent =
 formatBytes(uploadedBytes) + ' / ' + formatBytes(totalBytes);
 },
 onTaskComplete: function(file) {
 doneCount++;
 document.getElementById('status').textContent =
 doneCount + ' of ' + fileCount + ' files uploaded';
 }
});
</script>