Filter Files on Select

Use the onSelect callback to filter files before they enter the queue. This example rejects files larger than 5 MB and returns only the accepted files.

var maxSize = 5 * 1024 * 1024; // 5 MB

new MultipleUpload(document.getElementById('demo-filter'), {
 uploadUrl: '/api/upload',
 multiple: true,
 onSelect: function(files) {
 var accepted = [];
 var rejected = [];
 files.forEach(function(f) {
 if (f.size <= maxSize) accepted.push(f);
 else rejected.push(f.name);
 });
 var log = document.getElementById('filter-log');
 if (rejected.length) {
 log.textContent = 'Rejected (> 5 MB): ' + rejected.join(', ');
 } else {
 log.textContent = 'All ' + accepted.length + ' file(s) accepted.';
 }
 return accepted; // Only accepted files enter the queue
 }
});

Screening the selection

onSelect hands you the batch before anything joins the queue, so you can drop files that should not be there rather than rejecting them one at a time with an error each.

Filtering is not the same as rejecting

Silently removing files is only right when their absence is obvious — ignoring .DS_Store from a folder drop, say. Anything the user deliberately chose should produce a message instead; a file that vanishes without explanation is indistinguishable from one the control failed to accept.