External Progress Bar

External Progress Bar

Drive a Bootstrap progress bar from AjaxUploader's onProgress callback. The built-in progress UI is bypassed in favor of a fully external element.

0%
AjaxUploader.create(el, {
    uploadUrl: '/ajaxupload.axd/upload',
    autoUpload: true,
    onProgress: function (file, percent) {
        bar.style.width = percent + '%';
        bar.textContent = Math.round(percent) + '%';
    },
    onComplete: function (file) {
        bar.classList.add('bg-success');
        bar.textContent = 'Done!';
    }
});