Stats Dashboard

(function() {
 var uploader = new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 concurrency: 2
 });
 function update() {
 var s = uploader.getStats();
 document.getElementById('st-total').textContent = s.total;
 document.getElementById('st-pending').textContent = s.pending;
 document.getElementById('st-uploading').textContent = s.uploading;
 document.getElementById('st-completed').textContent = s.completed;
 document.getElementById('st-failed').textContent = s.failed;
 document.getElementById('st-bytes').textContent = MultipleUpload.formatSize(s.uploadedBytes) + ' / ' + MultipleUpload.formatSize(s.totalBytes);
 }
 uploader.on('taskProgress', update);
 uploader.on('taskComplete', update);
 uploader.on('taskError', update);
 uploader.on('fileAdded', update);
})();

Aggregating across the queue

Files completed, bytes transferred, current throughput, failures: all of it is derivable from the per-task callbacks, which is what makes a dashboard possible without polling anything.

Rate needs smoothing to be readable

An instantaneous transfer rate is extremely noisy — it swings with every chunk and every scheduling hiccup. A rolling average over a few seconds is what turns it into a number a person can actually read, and it is also what makes a time-remaining estimate stop jumping between two minutes and twenty seconds.