Image Dimensions

Validate image width and height before upload using FileReader and Image. This demo requires images to be at least 200x200 and at most 4000x4000 pixels.

Drag & drop images here (200x200 to 4000x4000)

<div id="myUploader" class="mu-uploader">
 <input type="file" class="mu-file-input" multiple accept="image/*" style="display:none" />
 ...
</div>

var uploader = new MultipleUpload(document.getElementById('myUploader'), {
 uploadUrl: '/api/upload',
 allowedExtensions: ['jpg', 'png', 'gif', 'webp'],
 onSelect: function(file) {
 return new Promise(function(resolve) {
 var reader = new FileReader();
 reader.onload = function(e) {
 var img = new Image();
 img.onload = function() {
 if (img.width < 200 || img.height < 200) {
 showError('Image too small: ' + img.width + 'x' + img.height);
 resolve(false);
 } else if (img.width > 4000 || img.height > 4000) {
 showError('Image too large: ' + img.width + 'x' + img.height);
 resolve(false);
 } else {
 resolve(true);
 }
 };
 img.src = e.target.result;
 };
 reader.readAsDataURL(file);
 });
 }
});

Rules in pixels

Minimum and maximum width and height are read in the browser before anything is sent, so an image that is too small is refused immediately. All four default to 0, meaning unbounded.

Say the requirement up front

“At least 800 px wide” next to the upload area is a requirement someone can satisfy; the same sentence after a rejection is an obstacle they have already hit. The rule is identical — only the timing differs, and the timing is the whole experience.