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);
 });
 }
});