Image Metadata
Display image metadata including dimensions, file type, and size immediately when files are selected.
Drag & drop images here
var uploader = new MultipleUpload(el, {
uploadUrl: '/api/upload',
accept: 'image/*',
onFileAdded: function(task) {
var img = new Image();
img.onload = function() {
displayMeta({
name: task.name,
type: task.file.type,
size: task.file.size,
width: img.width,
height: img.height,
aspectRatio: (img.width / img.height).toFixed(2)
});
};
img.src = URL.createObjectURL(task.file);
}
});
Reading a file before sending it
Name, type, size and pixel dimensions are all available in the browser, so the queue can show the user what they actually picked. That is the cheapest way to prevent the wrong-file upload, and it costs nothing on the server.
Dimensions answer questions size cannot
“Is this big enough to use as a banner” is a question about pixels, and file size is a poor proxy for it — a small file can be high resolution and a large one can be a heavily compressed thumbnail. If your layout has a minimum resolution, checking dimensions is the only test that answers it.