Percentage Display

Show upload progress as a numeric percentage alongside the progress bar. Clear, precise feedback for users.

What you should see: the numeric percentage alongside the bar, shown both from the built-in progress display and from a hand-rolled readout, so you can compare the two approaches.

Drag & drop files here, or paste from clipboard

Custom Percentage via JavaScript

<!-- Built-in progress with percentage -->
<core-upload asp-upload-url="/api/upload/upload"
 asp-progress="true"
 asp-auto-upload="true">
</core-upload> 
<!-- Custom percentage display -->
<div id="my-uploader"></div>
<div id="my-bar"></div>
<span id="my-pct">0%</span> 
<script>
CoreUpload.create('#my-uploader', {
 uploadUrl: '/api/upload/upload',
 autoUpload: true,
 onTaskProgress: function(file, percent) {
 document.getElementById('my-bar').style.width = percent + '%';
 document.getElementById('my-pct').textContent = Math.round(percent) + '%';
 }
});
</script>