MIME Type Validation

Validate files by MIME type using the onSelect callback. This demo only accepts image/* MIME types.

Drag & drop image files here

<div id="myUploader" class="mu-uploader">...</div>

var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 onSelect: function(file) {
 if (!file.type || !file.type.startsWith('image/')) {
 document.getElementById('error').textContent =
 file.name + ' is not an image file.';
 return false;
 }
 return true;
 }
});

Type as the browser reports it

onSelect gives you the files before they enter the queue, so you can inspect file.type and act on it. That value comes from the browser and is largely derived from the extension, which makes it a claim rather than a measurement.

When the claim is not enough

A renamed file reports whatever its new extension implies. validateMimeByMagic reads the leading bytes instead and identifies the real format, which is the check that catches a .png that is actually something else. Even then, the server must repeat it — the browser is not a boundary.