Works with any backend npm install Zero dependencies

Event Log

Complete event log showing every callback firing with timestamps. Watch the log as you upload files.

Drag & drop files here
Events will appear here...
var uploader = new MultipleUpload(el, {
 uploadUrl: '/api/upload',
 onSelect: function(files) { log('onSelect: ' + files.length + ' file(s)'); },
 onFileAdded: function(task) { log('onFileAdded: ' + task.name); },
 onQueueRemove: function(task) { log('onQueueRemove: ' + task.name); },
 onUploadStart: function() { log('onUploadStart'); },
 onTaskStart: function(task) { log('onTaskStart: ' + task.name); },
 onTaskProgress: function(task, pct) { log('onTaskProgress: ' + task.name + ' ' + pct + '%'); },
 onTaskComplete: function(task) { log('onTaskComplete: ' + task.name); },
 onTaskError: function(task, err) { log('onTaskError: ' + task.name); },
 onUploadComplete:function() { log('onUploadComplete'); },
 onDragEnter: function() { log('onDragEnter'); },
 onDragLeave: function() { log('onDragLeave'); },
 onDrop: function(files) { log('onDrop: ' + files.length + ' file(s)'); }
});

Watching the sequence

A running log of the callbacks as they fire, which is the fastest way to understand the order things happen in — and the fastest way to work out which hook you should be listening to for a particular job.

A useful thing to keep in your own app

A debug log of upload events, switchable on, pays for itself the first time a customer reports that uploads “sometimes fail”. The events carry the file, the sizes and the failure reason, which is most of what a support conversation otherwise has to guess at.