Image Gallery

var gallery = document.getElementById('gallery');
var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 accept: 'image/*',
 onFileAdded: function(task) {
 var reader = new FileReader();
 reader.onload = function(e) {
 var img = document.createElement('img');
 img.src = e.target.result;
 img.className = 'gallery-thumb';
 img.addEventListener('click', function() { openLightbox(img.src); });
 gallery.appendChild(img);
 };
 reader.readAsDataURL(task.file);
 }
});

A grid instead of a list

For photos the queue is the wrong shape: people identify images by looking at them, and a column of file names defeats that. Rendering the same tasks as a thumbnail grid turns review into something the user can do at a glance.

Keep the progress visible

The usual mistake when moving to a grid is losing per-tile state. A tile that has failed must look different from one that has uploaded, and a tile mid-transfer needs its own indicator — an overlay or a ring works where a full-width bar does not. Without that, a grid of twenty photos gives no way to tell which three did not make it.