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!';
 }
});

Driving your own indicator

The client callbacks give you start, progress and completion per file, which is everything a custom indicator needs. Nothing obliges you to use the built-in bar — drive a component from your own design system instead.

Cover the whole lifecycle

Custom indicators usually handle uploading and complete, and forget paused, retrying and failed. Those are the states where the user most needs to be told what is happening, and an indicator that silently stops moving is worse than none at all.