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.