Task Lifecycle Events

Trace the full lifecycle of each task: added, start, progress, complete/error.

(function() {
 var logEl = document.getElementById('log');
 function log(m) { var d = document.createElement('div'); d.className='pkg-log-entry'; d.textContent=m; logEl.appendChild(d); logEl.scrollTop=logEl.scrollHeight; }
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 onFileAdded: function(t) { log('[added] ' + t.fileName); },
 onTaskStart: function(t) { log('[start] ' + t.fileName); },
 onTaskProgress: function(t) { log('[progress] ' + t.fileName + ' ' + t.progress + '%'); },
 onTaskComplete: function(t) { log('[complete] ' + t.fileName); },
 onTaskError: function(t, e) { log('[error] ' + t.fileName + ': ' + e); },
 onTaskRetry: function(t) { log('[retry] ' + t.fileName + ' attempt ' + t.retryCount); },
 onAfterUpload: function(t, r) { log('[afterUpload] ' + t.fileName + ' guid=' + (r.fileGuid||'?')); }
 });
})();

The states a file moves through

Each file is a task with a status, and the callbacks map onto the transitions: added, started, progressing, paused, resumed, retried, and finally completed or failed. Following the lifecycle rather than a single event is what lets a custom UI show the right thing at every point.

The two that get skipped

Paused and retrying are the states custom interfaces most often forget, and they are exactly the ones where the user is most likely to think something has gone wrong. A row that shows “retrying in 2s” is reassuring; the same row frozen at 40% is not.