Custom Progress Event

Subscribe to progress events and build your own progress display outside the uploader.

What you should see: your own filename and percentage readout driven by the JS callbacks, with the built-in bar unused. One file at a time.

No file selected 0%

var uploader = CoreUpload.create('#custom-progress-uploader', {
 uploadUrl: '/api/upload/upload',
 multiple: false,
 autoUpload: true,
 onFileAdded: function(file) {
 document.getElementById('progress-filename').textContent = file.name;
 document.getElementById('progress-percent').textContent = '0%';
 document.getElementById('progress-bar').style.width = '0%';
 },
 onTaskProgress: function(file, percent) {
 var pct = Math.round(percent);
 document.getElementById('progress-percent').textContent = pct + '%';
 document.getElementById('progress-bar').style.width = pct + '%';
 },
 onTaskComplete: function(file, response) {
 document.getElementById('progress-status').textContent = 'Upload complete!';
 }
});