Chunk Visualization

Visualize which chunks have been uploaded with a grid display. Each chunk lights up as it completes.

What you should see: a grid where each cell is one 1 MB chunk, lighting up as that chunk is acknowledged. Use a file of a few MB or more — anything under 1 MB is a single chunk and the grid will have just one cell.

Select a file to see the chunk grid.

var uploader = CoreUpload.create('#viz-uploader', {
 uploadUrl: '/api/upload/upload',
 chunked: true,
 chunkSize: 1 * 1024 * 1024, // 1 MB chunks for visual effect
 autoUpload: true,
 maxFileSize: '200MB',
 onFileAdded: function(file) {
 var totalChunks = Math.ceil(file.size / (1 * 1024 * 1024));
 var grid = document.getElementById('chunk-grid');
 grid.innerHTML = '';
 for (var i = 0; i < totalChunks; i++) {
 var cell = document.createElement('div');
 cell.className = 'chunk-cell pending';
 cell.id = 'chunk-' + i;
 grid.appendChild(cell);
 }
 },
 onChunkComplete: function(file, chunkIndex) {
 var cell = document.getElementById('chunk-' + chunkIndex);
 if (cell) cell.className = 'chunk-cell complete';
 },
 onTaskComplete: function(file) {
 console.log('All chunks uploaded:', file.name);
 }
});