Aurigma Image Uploader 5.0 Dual
Specifying Restrictions for Image Dimensions
See Also

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 too small files (which are smaller than, say, 640 × 480).
- If you provide photo blog hosting, typically it makes no sense to accept too large files (which are larger than, say, 800 × 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:

- MinImageWidth and MinImageHeight - specify minimum allowed image dimensions (in pixels).
- MaxImageWidth and MaxImageHeight - specify maximum allowed image dimensions (in pixels).

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

If one of these restrictions is violated, Image Uploader does 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 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 × 1600.

JavaScript | Copy Code
--- | ---
    <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 × 800.

JavaScript | Copy Code
--- | ---
    <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 × 360 through 800 × 800 only.

JavaScript | Copy Code
--- | ---
    <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 | Copy Code
--- | ---
    <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);
            }
        }
    }
    </script>

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

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

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

    iu.writeHtml();
    </script>

# See Also

##### Reference

DimensionsAreTooLargeText Property
DimensionsAreTooSmallText Property
MaxImageHeight Property
MaxImageWidth Property
MessageDimensionsAreTooLargeText Property
MessageDimensionsAreTooSmallText Property
MinImageHeight Property
MinImageWidth Property
UploadFileCount Property
UploadFileHeight Property
UploadFileWidth Property
UploadFileName Property
UploadFileCountChange Event
UploadFileRemove Method

##### Manual

Restricting Files by Extensions and Types
Specifying Restrictions for Size and Number of Files