Check image dimensions

[Schooott]

Is it possible to check the image size/dimensions on a file input?

Maybe this is something for a future release? :)
Something like this:
<input type="file" data-validation="dimension" data-validation-min-dimension="500px">

[victorjonsson]

Yes, the plugin is lacking this feature.

[LinzardMac]

+1 vote for this feature

[victorjonsson]

This is now supported in the latest version of the plugin (only available here on github at the moment). Using the file-module gets you access to the validator dimension that can validate that the size dimension of an image (of type jpg, gif and png) is within a certain scope. You can declare allowed minimum size and/or maximum size. Here's some examples:

<!-- Validate that the image is no smaller than 100x100 px -->
<input data-validation="dimension" data-validation-min-dimension="100" />

<!-- Validate that the image is no smaller than 300x500 px (width/height) -->
<input data-validation="dimension" data-validation-min-dimension="300x500" />

<!-- Validate that the image is no larger than 500x1000 px -->
<input data-validation="dimension" data-validation-max-dimension="500x1000" />

<!-- Validate that the image is no smaller than 100x200 px and no larger than 800x800 -->
<input data-validation="dimension" 
             data-validation-min-dimension="100x200"
             data-validation-max-dimension="800" />

• You declare either a number that represents min/max value for both width and height, or declare the width and height individually by giving a value like [WIDTH]x[HEIGHT]
• This is only supported in browser that has implemented the File API http://caniuse.com/#feat=fileapi
• If you want to declare the unit pxin the end of the declaration you can do so data-validation-min-dimension="200px"

[victorjonsson]

I will also implement a validator for image ratio before release

[Schooott]

This is perfect. Thanks for the awesome work!

[ReneMuetti]

<!-- Validate that the image is no larger than 800x800 px and no smaller than 100x200 -->
<input data-validation="dimension" 
             data-validation-max-dimension="100x200"
             data-validation-max-dimension="800" />

better to

<!-- Validate that the image is no larger than 800x800 px and no smaller than 100x200 -->
<input data-validation="dimension" 
             data-validation-min-dimension="100x200"
             data-validation-max-dimension="800" />

[victorjonsson]

That was a typo. I have updated the comment.

[victorjonsson]

I will change the min/max declarations so that it conforms with other validators checking sizes of some kind.

<!-- Validate that the image is no smaller than 100x100 px -->
<input data-validation="dimension" data-validation-dimension="min100" />

<!-- Validate that the image is no smaller than 300x500 px (width/height) -->
<input data-validation="dimension" data-validation-dimension="min300x500" />

<!-- Validate that the image is no larger than 500x1000 px -->
<input data-validation="dimension" data-validation-dimension="max500x1000" />

<!-- Validate that the image is no smaller than 100x100 px and no larger than 800x800 -->
<input data-validation="dimension" data-validation-dimension="100-800" />

<!-- Validate that the image is no smaller than 200x400 px and no larger than 600x1200 -->
<input data-validation="dimension" data-validation-dimension="200x400-600x1200" />

[LinzardMac]

AWESOME! Thank you!