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>