Chunk Visualization

var chunkSize = 1 * 1024 * 1024; // 1 MB
var grid = document.getElementById('chunk-grid');
var cells = [];

new MultipleUpload(document.getElementById('demo-chunk-viz'), {
 uploadUrl: '/api/upload',
 chunked: true,
 chunkSize: chunkSize,
 onTaskStart: function(task) {
 var totalChunks = Math.ceil(task.fileSize / chunkSize);
 grid.innerHTML = '';
 cells = [];
 for (var i = 0; i < totalChunks; i++) {
 var cell = document.createElement('div');
 cell.className = 'chunk-cell';
 cell.textContent = i + 1;
 grid.appendChild(cell);
 cells.push(cell);
 }
 },
 onTaskProgress: function(task) {
 var uploaded = Math.floor((task.progress / 100) * cells.length);
 cells.forEach(function(c, i) {
 if (i < uploaded) c.className = 'chunk-cell done';
 else if (i === uploaded) c.className = 'chunk-cell uploading';
 else c.className = 'chunk-cell';
 });
 },
 onTaskComplete: function() {
 cells.forEach(function(c) { c.className = 'chunk-cell done'; });
 }
});

Seeing the chunks

Rendering each chunk as it completes makes a large upload legible in a way a single percentage does not: the user can see that work is happening, and roughly how much is left, without interpreting a number that barely moves.

Out-of-order is normal

With chunkConcurrency above 1, chunks complete in whatever order they finish, so a visualisation fills in unevenly. That is correct behaviour and worth designing for — a display that assumes left-to-right completion will look broken on exactly the configuration that uploads fastest.