Works with any backend npm install Zero dependencies

Combined Validation

All validations combined: allowed extensions, max file size, max file count, MIME type check, no duplicates, and no spaces in file names.

Drag & drop files here
<div id="myUploader" class="mu-uploader">...</div>
<div id="errors"></div>
var addedNames = {};
var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 allowedExtensions: ['jpg', 'png', 'gif', 'pdf'],
 maxFileSize: 5 * 1024 * 1024,
 maxFiles: 5,
 onSelect: function(file) {
 // No spaces in name
 if (/\s/.test(file.name)) {
 showError(file.name + ': spaces not allowed in file name.');
 return false;
 }
 // No duplicates
 if (addedNames[file.name]) {
 showError(file.name + ': already added.');
 return false;
 }
 addedNames[file.name] = true;
 return true;
 },
 onQueueRemove: function(file) { delete addedNames[file.name]; },
 onError: function(file, error) { showError((file ? file.name + ': ' : '') + error); }
});

Several rules at once

Extension, size and count limits stack, and a file has to satisfy all of them. They are evaluated in the browser before anything is sent, so the user finds out immediately rather than after a wait.

Report the specific failure

When three rules are in play, “that file is not allowed” leaves the user guessing which one they hit — and often trying the same file again. onValidationError receives the message and the file name, so the feedback can name the actual rule.