Works with any backend npm install Zero dependencies

Pre-loaded Files

Display pre-existing files in the queue when the page loads, useful for edit forms where files were previously uploaded.

Drag & drop files here
<div id="myUploader" class="mu-uploader">...</div>
var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 preloadedFiles: [
 { name: 'report.pdf', size: 245000, guid: 'abc-123' },
 { name: 'photo.jpg', size: 1800000, guid: 'def-456' },
 { name: 'data.csv', size: 52000, guid: 'ghi-789' }
 ]
});

Files that are already there

preloadedFiles defaults to null. Given entries, they appear in the queue as completed, which is what an edit form needs: existing attachments and new ones in a single list rather than two separate interfaces.

They behave differently on removal

A pre-loaded entry represents a file the server already holds, so removing it has to be a delete on your side — there is no upload to cancel. Keeping that distinction straight is what stops an edit form from silently detaching files the user never touched.