Custom Progress Event

Build a completely custom progress handler using onTaskProgress, onTaskStart, and onTaskComplete to drive your own UI elements.

Uploading

0% 0 / 0

var card = document.getElementById('cpe-card');

new MultipleUpload(document.getElementById('demo-cpe'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onTaskStart: function(task) {
 card.style.display = '';
 document.getElementById('cpe-name').textContent = task.fileName;
 document.getElementById('cpe-status').textContent = 'Uploading';
 document.getElementById('cpe-status').className = 'cpe-status uploading';
 },
 onTaskProgress: function(task) {
 document.getElementById('cpe-fill').style.width = task.progress + '%';
 document.getElementById('cpe-pct').textContent = Math.round(task.progress) + '%';
 document.getElementById('cpe-size').textContent =
 MultipleUpload.formatSize(task.uploadedBytes) + ' / ' +
 MultipleUpload.formatSize(task.fileSize);
 },
 onTaskComplete: function(task) {
 document.getElementById('cpe-fill').style.width = '100%';
 document.getElementById('cpe-pct').textContent = '100%';
 document.getElementById('cpe-status').textContent = 'Done';
 document.getElementById('cpe-status').className = 'cpe-status done';
 }
});