Works with any backend npm install Zero dependencies

In Form

Embed the uploader inside an HTML form. Uploaded file GUIDs are stored in a hidden input and submitted with the form.


Drag & drop files here
<form action="/api/submit" method="post">
 <input type="text" name="name" />
 <input type="hidden" name="fileGuids" id="fileGuids" />
 <div id="myUploader" class="mu-uploader">...</div>
 <button type="submit">Submit Form</button>
</form>
var guids = [];
var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 onComplete: function(file, response) {
 guids.push(response.guid);
 document.getElementById('fileGuids').value = guids.join(',');
 }
});

Uploading inside a normal form

The uploader sits with the other fields and does its work in the background. The completed GUIDs land in a hidden input, so the form submits references while the bytes have already gone.

Do not let submit outrun the queue

Nothing stops the user pressing submit mid-upload, and the form would post an incomplete list. Disable submit until the queue is idle, or check the state in the handler — a record saved without an attachment the user believed they added is a failure they discover much later.