Works with any backend npm install Zero dependencies

Full Width

A full-width uploader that spans the entire container width, ideal for page-level upload areas.

Drag & drop files anywhere in this area
<style>
 #myUploader { width: 100%; }
 .mu-select-btn { display: block; width: 100%; text-align: center; }
 .mu-dropzone { width: 100%; padding: 40px 20px; }
</style>
<div id="myUploader" class="mu-uploader">...</div>
var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload'
});

Filling the container

The uploader takes the width of whatever it is placed in, so a full-width layout is a matter of the container rather than an option. That suits an import screen or an empty state where uploading is the page's purpose.

Wide has a limit

Past a certain width the queue's columns drift apart and the file name ends up far from its progress bar, which is harder to read rather than easier. Capping the maximum width keeps the related information together even when the page is wider.