External Progress

Render progress information in a custom location outside the uploader using JS API events.

What you should see: progress rendered somewhere else on the page entirely — the component reports, your markup displays. The built-in bar is not used.

Waiting for upload... 0%

-- Idle

var uploader = CoreUpload.create('#ext-progress-uploader', {
 uploadUrl: '/api/upload/upload',
 multiple: false,
 autoUpload: true,
 onFileAdded: function(file) {
 document.getElementById('ext-file-name').textContent = file.name;
 document.getElementById('ext-size').textContent =
 (file.size / 1024).toFixed(1) + ' KB';
 document.getElementById('ext-status').textContent = 'Uploading...';
 },
 onTaskProgress: function(file, percent) {
 var pct = Math.round(percent);
 document.getElementById('ext-percent').textContent = pct + '%';
 document.getElementById('ext-bar').style.width = pct + '%';
 },
 onTaskComplete: function(file) {
 document.getElementById('ext-status').textContent = 'Complete';
 document.getElementById('ext-bar').style.width = '100%';
 }
});

Progress away from the uploader

The callbacks let you drive an indicator anywhere on the page: a bar in a fixed header, a badge on a nav item, a percentage in the document title so it stays visible from another tab.

A summary cannot name the failure

One external number says how far the batch got, not which file did not make it. Keep the queue reachable — even collapsed behind the indicator — so a user seeing “18 of 20” has somewhere to find out about the other two.