MultipleUpload JavaScript upload component
Works with any backend npm install Zero dependencies
Contact

Let users drag queue rows to change upload order

enableQueueReorder: true turns each PENDING queue row into a draggable item. Users can drag rows up or down to change upload priority; the internal task list reorders to match. In-flight tasks stay put (you can't reorder bytes already on the wire). Fires a queueReordered event with the new task-ID array for application code to react to.

queueReordered events:
- (drop a few files, then drag rows to reorder)
Try it: pick 3-5 files (don't hit upload). Each row shows a drag handle. Drag any row to a different position - the queue reorders + the log below shows the new task ID sequence.
Configuration
new MultipleUpload('#uploader', {
 uploadUrl: '/api/upload',
 multiple: true,
 autoUpload: false,
 enableQueueReorder: true,
 onQueueReordered: (newOrder, uploader) => {
 // newOrder is an array of task IDs in their new sequence
 console.log('User reordered:', newOrder);
 savePriorityToServer(newOrder); // for example
 }
});
Programmatic reordering

Build your own UI (sortable.js, custom drag-drop, keyboard shortcuts) by calling the public method:

// Move task with id `srcId` to occupy the position of `dstId`
uploader.reorderTask('task-abc', 'task-xyz');
// Same semantics as drag-drop: dropping srcId on dstId
// gives srcId dstId's previous slot; the rest shift.
Drag-drop semantics
  • Drop ON target => take its slot. Dropping A on C makes A take C's previous index. C and anything between shifts.
  • PENDING only. Tasks in UPLOADING / PAUSED / COMPLETED / FAILED states aren't draggable - the handle doesn't render.
  • Drop targets only on other PENDING rows. Can't drop onto an UPLOADING task.
  • Persisted with state. When persistState: true, the new order survives a page reload.
Accessibility

Drag-to-reorder uses HTML5 native drag-and-drop, which is keyboard-accessible on most platforms via the draggable="true" + browser-default keyboard handlers. For richer keyboard support (arrow-keys-to-reorder), build a wrapper on top of uploader.reorderTask():

document.addEventListener('keydown', (e) => {
 const focused = document.activeElement;
 if (!focused?.matches?.('.mu-queue-item--reorderable')) return;
 const taskId = focused.dataset.taskId;
 const siblings = [...focused.parentNode.querySelectorAll('.mu-queue-item--reorderable')];
 const idx = siblings.indexOf(focused);
 if (e.key === 'ArrowUp' && idx > 0)
 uploader.reorderTask(taskId, siblings[idx - 1].dataset.taskId);
 if (e.key === 'ArrowDown' && idx < siblings.length - 1)
 uploader.reorderTask(taskId, siblings[idx + 1].dataset.taskId);
});
Visual feedback
  • Dragging row: .mu-queue-item--dragging => 45% opacity
  • Drop target on hover: .mu-queue-item--drop-target => cyan top-bar + tinted background
  • Drag handle hover: handle color shifts from #94a3b8 to #475569
  • Cursor: grab on rest, grabbing while dragging