Custom Progress UI

var panel = document.getElementById('cp-panel');

new MultipleUpload(document.getElementById('demo-custom-progress'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onTaskStart: function(task) {
 panel.style.display = '';
 document.getElementById('cp-name').textContent = task.fileName;
 },
 onTaskProgress: function(task) {
 document.getElementById('cp-fill').style.width = task.progress + '%';
 document.getElementById('cp-pct').textContent = Math.round(task.progress) + '%';
 document.getElementById('cp-speed').textContent =
 MultipleUpload.formatSize(task.speed) + '/s';
 document.getElementById('cp-eta').textContent =
 'ETA: ' + MultipleUpload.formatTime(task.eta);
 document.getElementById('cp-bytes').textContent =
 MultipleUpload.formatSize(task.uploadedBytes) + ' / ' +
 MultipleUpload.formatSize(task.fileSize);
 },
 onComplete: function() {
 document.getElementById('cp-pct').textContent = 'Done!';
 }
});