Custom Progress UI

Build a completely custom progress display using the JavaScript API events. Subscribe to progress events and render your own UI.

What you should see: a progress display built entirely from your markup, fed by the component's events. The 50 MB cap still applies.

<div id="my-uploader"></div>
<div id="panel" style="display:none"> <p id="filename"></p> <p id="detail"></p> <span id="badge">0%</span> <div id="bar" style="width:0%"></div>
</div> 
<script>
function formatBytes(b) {
 if (b > 1048576) return (b / 1048576).toFixed(1) + ' MB';
 return (b / 1024).toFixed(0) + ' KB';
}

CoreUpload.create('#my-uploader', {
 uploadUrl: '/api/upload/upload',
 multiple: true,
 autoUpload: true,
 onFileAdded: function(file) {
 document.getElementById('panel').style.display = '';
 document.getElementById('filename').textContent = file.name;
 document.getElementById('detail').textContent = formatBytes(file.size);
 document.getElementById('bar').style.width = '0%';
 document.getElementById('badge').textContent = '0%';
 },
 onTaskProgress: function(task, percent) {
 var pct = Math.round(percent);
 document.getElementById('bar').style.width = pct + '%';
 document.getElementById('badge').textContent = pct + '%';
 document.getElementById('detail').textContent =
 formatBytes(task.uploadedBytes) + ' of ' + formatBytes(task.fileSize);
 },
 onTaskComplete: function(file) {
 document.getElementById('badge').textContent = 'Done';
 },
 onTaskError: function(file, error) {
 document.getElementById('badge').textContent = 'Error';
 }
});
</script>

Replacing the indicator

The client callbacks give you start, progress and completion per file, so a progress display of your own is a matter of listening rather than of overriding the component's markup. asp-progress="false" turns the built-in one off when you have your own.

Cover the states people forget

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