Works with any backend npm install Zero dependencies

Configuration

Explore the most common configuration options: upload URL, auto-upload, max file size, allowed extensions, and max file count.

Drag & drop files here
<div id="myUploader" class="mu-uploader">
 <button type="button" class="mu-select-btn">Select Files</button>
 <input type="file" class="mu-file-input" multiple style="display:none" />
 <div class="mu-dropzone"><div class="mu-dropzone-text">Drag &amp; drop files here</div></div>
 <div class="mu-preview-area"></div>
 <div class="mu-progress" style="display:none">...</div>
 <div class="mu-queue"></div>
</div>
var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 autoUpload: true,
 multiple: true,
 maxFileSize: 10 * 1024 * 1024, // 10 MB
 allowedExtensions: ['jpg', 'png', 'gif', 'pdf', 'docx'],
 maxFiles: 5
});

The options that decide behaviour

Most configuration falls into four groups: where files go (uploadUrl, method, headers), what is allowed (allowedExtensions, the size and count limits), how the transfer runs (chunked, concurrency, retries), and what the user sees (showThumbnails, autoUpload, the layout switches).

Three defaults that surprise people

multiple is false, so a multi-file uploader must ask for it. concurrency is 1, so uploads are sequential until you say otherwise. And maxFileSize is -1 — no limit — which is also what an unparseable size string falls back to.