Works with any backend npm install Zero dependencies

All Events

Log every MultipleUpload event to a console div. Useful for debugging and understanding the event lifecycle.

Event Log
var log = document.getElementById('event-log');
function logEvent(name, detail) {
 var time = new Date().toLocaleTimeString();
 var msg = document.createElement('div');
 msg.innerHTML = '<span style="color:#22d3ee">' + time + '</span> ' +
 '<span style="color:#f59e0b">' + name + '</span> ' +
 (detail || '');
 log.appendChild(msg);
 log.scrollTop = log.scrollHeight;
}

new MultipleUpload(document.getElementById('demo-all-events'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onInit: function() { logEvent('onInit'); },
 onSelect: function(files) {
 logEvent('onSelect', files.length + ' file(s)');
 },
 onTaskStart: function(task) { logEvent('onTaskStart', task.fileName); },
 onTaskProgress: function(task) {
 logEvent('onTaskProgress', task.fileName + ' ' + Math.round(task.progress) + '%');
 },
 onTaskComplete: function(task, result) {
 logEvent('onTaskComplete', task.fileName);
 },
 onTaskError: function(task, error) {
 logEvent('onTaskError', task.fileName + ': ' + error);
 },
 onProgress: function(progress) {
 logEvent('onProgress', Math.round(progress.percent) + '%');
 },
 onComplete: function(files) {
 logEvent('onComplete', files.length + ' file(s) done');
 },
 onChange: function(files) {
 logEvent('onChange', files.length + ' completed file(s)');
 },
 onError: function(msg) { logEvent('onError', msg); }
});