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