When you use Image Uploader to upload images (rather than common files) to your web site, you may desire to limit dimensions of uploaded images. For example:

  • If you take photo print orders, you may want to cut off the files that are too small (which are smaller than, say, 640 x 480).
  • If you provide photo blog hosting, typically it makes no sense to accept the files that are too large (which are larger than, say, 800 x 600).
  • ...

This article discusses how to configure image dimensions restrictions in Image Uploader.

Restricting Image Dimensions

Image Uploader exposes the following properties that enable to restrict dimensions:

Note

You may want to resize the images which are too large instead of prohibiting them. See the Resizing and Rotating Images topic for more details on this.

If one of these restrictions is violated, Image Uploader will not allow selecting "wrong" files for the upload. Depending on the control layout and its view mode, either error message is displayed (as specified with the MessageDimensionsAreTooSmallText and MessageDimensionsAreTooLargeText properties) or appropriate items are marked as too large or too small in the folder pane (captions are designated using the DimensionsAreTooSmallText and DimensionsAreTooLargeText properties).

Important

As limitations specified in Image Uploader are checked only on the client side, you should not interpret them as a reliable protection. A potential malicious user can bypass all these limitations (by emulating Image Uploader or modifying its parameters in a local copy of a page). That's why it is highly recommended to implement server-side verification of uploaded files in addition to Image Uploader file tests.

In other words, all the limitation features discussed in this article should be used solely for the convenience of the user. They should not be interpreted as a serious protection from malicious users.

Custom Image Restrictions

To set custom restrictions on images you can access the files in upload list through JavaScript and check their properties - including image dimensions. If the restrictions are violated, a warning message may be shown, or the undesirable files may be removed from the upload list. In the example below this check is done when the UploadFileCountChange occurs, i.e. when the user marks more files for upload.

Code Examples

How to Set Upper Limit

This code example demonstrates how to prevent the upload of images larger than 1600 x 1600.

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Any other params...

iu.addParam("MaxImageWidth", "1600");
iu.addParam("MaxImageHeight", "1600");
iu.addParam("DimensionsAreTooLargeText", "Too large size");
iu.addParam("MessageDimensionsAreTooBigText", 
   "Image size should be smaller then [MaxImageWidth]x[MaxImageHeight] pixels."); 

//...

iu.writeHtml();
</script>

How to Set Lower Limit

This code example demonstrates how to refuse uploading images smaller than 800 x 800.

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Any other params...

iu.addParam("MinImageWidth", "800");
iu.addParam("MinImageHeight", "800");
iu.addParam("DimensionsAreTooSmallText", "Too small size");
iu.addParam("MessageDimensionsAreTooSmallText", 
   "Image size should be larger then [MinImageWidth]x[MinImageHeight]" + 
   "to get print quality good enough.");

//...

iu.writeHtml();
</script>

How to Set Both Lower And Upper Limits

This code example demonstrates how to upload images from 360 x 360 through 800 x 800 only.

JavaScript

<script type="text/javascript" src="iuembed.js">  </script>
<script type="text/javascript">
var iu = new ImageUploaderWriter("ImageUploader", 710, 500);

//...Any other params...

iu.addParam("MinImageWidth", "360");
iu.addParam("MinImageHeight", "360");
iu.addParam("MaxImageWidth", "800");
iu.addParam("MaxImageHeight", "800");
iu.addParam("DimensionsAreTooSmallText", "Too small size");
iu.addParam("DimensionsAreTooLargeText", "Too large size");

//...

iu.writeHtml();
</script>

How to Set Custom Restrictions

This code example demonstrates how to set custom restrictions on image dimensions using JavaScript. In this case the ratio between image height and width should be 3:4.

JavaScript

<script language="javascript" src="iuembed.js">  </script>
<script language="javascript">
function ImageUploader_UploadFileCountChange(){
    var imageUploader=getImageUploader("ImageUploader");
    for (i=imageUploader.getUploadFileCount(); i>=1; i--){
        if (imageUploader.getUploadFileHeight(i)/imageUploader.getUploadFileWidth(i)!=0.75){
            alert(imageUploader.getUploadFileName(i) + " doesn't have 3:4 ratio.");
            imageUploader.UploadFileRemove(i);
        }
    }
}
var iu = new ImageUploaderWriter("ImageUploader", 650, 400);

//...Any other params and event handlers...

iu.addEventListener("UploadFileCountChange", "ImageUploader_UploadFileCountChange");

//...Any other params and event handlers...

iu.writeHtml();
</script>