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
0%
File: --
Speed: --
Uploaded: --
ETA: --
var uploader = AjaxUploader.getInstance('Uploader1');
uploader.on('taskProgress', function(task) {
    var pct = task.percent;
    var offset = 264 - (264 * pct / 100);
    circle.setAttribute('stroke-dashoffset', offset);
    percentText.textContent = Math.round(pct) + '%';
    speed.textContent = AjaxUploader.formatSize(task.speed) + '/s';
    uploaded.textContent = AjaxUploader.formatSize(task.loaded) +
        ' / ' + AjaxUploader.formatSize(task.total);
});