Dimensions validation for image client side

Question

The website that I'm working on has an option to upload images, but I must validate the image's dimensions (width, height) before uploading to the server side or before submitting.

For example the image must be 250x250, otherwise an alert occurs and the user can't upload the image, here's a part of my code:

<form action="upload_file.php" method="post"  enctype="multipart/form-data" name = "upload" id="insertBook" onSubmit="return validateImage();"> 
    <input type="file" name="image" value="upload" id = "myImg">
    <input type="submit" name = "submit">           
</form>

validateImage function now just checks for the extensions, I want it also to check for the dimensions.

Here's the code so far:

function validateImage(){
    var allowedExtension = ["jpg","jpeg","gif","png","bmp"];
    var fileExtension = document.getElementById('myImg').value.split('.').pop().toLowerCase();
    var isValidFile = false;
    for(var index in allowedExtension) {
        if(fileExtension === allowedExtension[index]) {
            isValidFile = true; 
            break;
        }
    }
    if(!isValidFile) {
        alert('Allowed Extensions are : *.' + allowedExtension.join(', *.'));
    }
    return isValidFile;
}

Thank you! :)

Answer 1

function validateImage(){
    var isValidFile = false;
    var image = document.getElementById('myImg');

    var allowedExtension = ["jpg","jpeg","gif","png","bmp"];

    var srcChunks = image.src.split( '.' );
    var fileExtension = srcChunks[ srcChunks.length - 1 ].toLowerCase();

    if ( image.width !== image.height !== 250 ) {
        console.log( 'Size check failed' );
        return false;
    } 

    for(var index in allowedExtension) {
        if(fileExtension === allowedExtension[index]) {
            isValidFile = true; 
            break;
        }
    }

    if(!isValidFile) {
        alert('Allowed Extensions are : *.' + allowedExtension.join(', *.'));
    }

    return isValidFile;
}

Answer 2

Related to this topic

As I said in my comment, you can check for the size on the client-side but it's unsafe as the javascript may be bypassed, and your validation would serve no purpose. If someone really wants to upload a file that is 5Go, he just have to redefine your check function.

A server side validation isn't accessible by the client. Moreover depending on your backend and your image handling (Are you handling it like a simple file ? Or do you have some lib to work with images ?), you may find some methods to help you with image dimensions. For example in python I use PIL (Pillow for 3.x version) to check for image information, size, dimension, content, check if it's a real file or not... Actually it's really easy to upload a corrupted file that contains some php code in it (for example) so you should be really careful when you let users upload content to your server.