Works with any backend npm install Zero dependencies

MIME Type Filter

Filter by MIME types with wildcard support (e.g., image/*).

(function() {
 var logEl = document.getElementById('log');
 function log(m) { var d = document.createElement('div'); d.className='pkg-log-entry'; d.textContent=m; logEl.appendChild(d); logEl.scrollTop=logEl.scrollHeight; }
 new MultipleUpload('#demo', {
 uploadUrl: '/api/upload',
 multiple: true,
 allowedMimeTypes: 'image/*,application/pdf',
 onValidationError: function(msg, name) { log((name||'file') + ': ' + msg); }
 });
})();

Filtering by type rather than extension

allowedMimeTypes defaults to an empty string, meaning anything is accepted. It takes a comma-separated string or an array, and understands wildcards — image/* covers every image type without you enumerating formats you have not thought of yet.

Where the type comes from

By default this checks the type the browser reports, which is largely derived from the file extension and is therefore a claim rather than a measurement. Turn on validateMimeByMagic and the component reads the file's leading bytes instead, which is how a .png that is really something else gets caught. Even then, the server has to check again — it is the only side the user cannot modify.