Works with any backend npm install Zero dependencies

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!';
 }
});

The two numbers again

onProgress is the whole queue, weighted by bytes. onTaskProgress is one file. Feeding a single bar from the per-file callback is the classic bug: it jumps backwards every time a new file starts.

Progress is reassurance, not decoration

The bar's real job is answering “is this still working”. That is why a bar which sits still during a large chunk is worse than one showing a rate or a spinner alongside — the number being accurate is not the same as the user being reassured.