Custom Progress Display

Custom Progress via onTaskProgress

Build a fully custom progress display using the onTaskProgress callback. This example shows a circular progress indicator, speed gauge, and detailed statistics.

Drag & drop files here, or paste from clipboard

File: --

Speed: --

Uploaded: --

ETA: --

var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('taskProgress', function(task) {
 var pct = clampPercent(task.percent);
 var offset = 264 - (264 * pct / 100);
 circle.setAttribute('stroke-dashoffset', offset);
 percentText.textContent = pct + '%';
 speed.textContent = AjaxUploader.formatSize(task.speed) + '/s';
 uploaded.textContent = AjaxUploader.formatSize(task.loaded) +
 ' / ' + AjaxUploader.formatSize(task.total);
});