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:
This article discusses how to configure image dimensions restrictions in Image Uploader.
Image Uploader exposes the following properties that enable to restrict dimensions:
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).
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.
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.
This code example demonstrates how to prevent the upload of images larger than 1600 x 1600.
<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>
This code example demonstrates how to refuse uploading images smaller than 800 x 800.
<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>This code example demonstrates how to upload images from 360 x 360 through 800 x 800 only.
<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>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.
<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>