Reorder Queue

var uploader = new MultipleUpload(document.getElementById('demo-reorder'), {
 uploadUrl: '/api/upload',
 multiple: true,
 autoUpload: false,
 onSelect: function(files) {
 var list = document.getElementById('reorder-list');
 document.getElementById('reorder-upload-btn').style.display = '';
 list.innerHTML = '';
 files.forEach(function(f) {
 var item = document.createElement('div');
 item.className = 'reorder-item';
 item.draggable = true;
 item.innerHTML = '<span class="handle"></span>' +
 '<span class="name">' + f.name + '</span>' +
 '<span class="size">' + MultipleUpload.formatSize(f.size) + '</span>';
 list.appendChild(item);
 });
 }
});

document.getElementById('reorder-upload-btn').addEventListener('click', function() {
 uploader.upload();
});

Changing the order before sending

Selection order is an accident of how the user browsed their disk. Letting them reorder before the queue starts is much easier than fixing the sequence afterwards, and with autoUpload off that order is the order files are sent in.

Dragging needs a keyboard equivalent

Drag-to-reorder is unavailable to anyone not using a mouse and awkward on touch. Move-up and move-down buttons on each row are the simplest way to keep the feature usable for everyone, and they cost very little to add.