Image Metadata
Display image metadata (dimensions, file size, type) before upload. Validate against requirements.
What you should see: dimensions, size and type read in the browser and shown before upload, so a file can be checked against requirements without a round trip. Auto-upload is off.
var uploader = CoreUpload.create('#metadata-uploader', {
uploadUrl: '/api/upload/upload',
allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
maxFileSize: '10MB',
autoUpload: false,
onFileAdded: function(file) {
var img = new Image();
img.onload = function() {
showMetadata({
name: file.name,
size: file.size,
type: file.type,
width: img.naturalWidth,
height: img.naturalHeight
});
// Validate: reject images smaller than 200x200
if (img.naturalWidth < 200 || img.naturalHeight < 200) {
alert('Image must be at least 200x200 pixels');
return false;
}
};
img.src = URL.createObjectURL(file.nativeFile);
}
});Reading the file before it is sent
Name, type, size and pixel dimensions are all available in the browser, so the queue can show the user what they actually picked. It is the cheapest way to prevent the wrong-file upload, and it costs the server nothing.
Dimensions answer what size cannot
“Is this big enough for a banner” is a question about pixels, and file size is a poor proxy — a small file can be high resolution and a large one a heavily compressed thumbnail. Where your layout has a minimum resolution, checking dimensions is the only test that answers it.