Basic Progress

A basic progress bar that shows upload progress in real time. The bar fills from left to right as bytes are uploaded.

Drag & drop files here

<div id="myUploader" class="mu-uploader">
 ...
 <div class="mu-progress" style="display:none">
 <div class="mu-progress-bar"><div class="mu-progress-fill"></div></div>
 <div class="mu-progress-text"></div>
 </div>
 ...
</div>
<div id="progressDisplay"></div>

var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 onProgress: function(file, percent) {
 document.getElementById('progressDisplay').textContent =
 file.name + ': ' + percent + '% uploaded';
 },
 onComplete: function(file) {
 document.getElementById('progressDisplay').textContent =
 file.name + ': Upload complete!';
 }
});