Question

75

Client-side image resolution/size validation

rated 0 times [ 79] [ 4] / answers: 1 / hits: 19172 / 9 Years ago, fri, october 2, 2015, 12:00:00

I'm designing a website for a printing company. They want an image size/resolution checker that will let their customers upload an image they want to print, and tell them if the image resolution is good enough for printing.

I'm using Adobe Muse, so I need a simple HTML and CSS solution to this without any server-side requirements.

This is what I have so far, based on this question:

window.URL = window.URL || window.webkitURL;

$(form).submit(function(e) {

    var form = this;

    e.preventDefault(); //Stop the submit for now



   //Replace with your selector to find the file input in your form var

   fileInput = $(this).find(input[type=file])[0];

   file = fileInput.files && fileInput.files[0];

   if (file) {

       var img = new Image();

       img.src = window.URL.createObjectURL(file);



        img.onload = function() {

            var width = img.naturalWidth, height = img.naturalHeight;

            window.URL.revokeObjectURL( img.src );

            if( width == 400 && height == 300 ) {

                form.submit();

            } else { 

                //stop

            } 

        }; 

    } else {

        //No file was input or browser doesn't support client side reading

        form.submit();

    }

});

However, I don't get any popup message. What am I doing wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austynp

Add To Favorites

Follow

Total Points: 505

Total Questions: 118

Total Answers: 106

Location: Tajikistan

Member since Sun, Aug 29, 2021

3 Years ago

austynp questions

1 How to make puppeteer wait for page redirect from Cloudflare browser check?

Tue, Apr 20, 21, 00:00, 3 Years ago

1 Redux createAsyncThunk vs useEffect hook

Sun, Apr 11, 21, 00:00, 3 Years ago

1 How to type an object key in Typescript?

Sat, Feb 6, 21, 00:00, 3 Years ago

1 How do I send image data from a url using express?

Thu, Mar 19, 20, 00:00, 4 Years ago

1 Can I wait for a process to complete when consuming RabbitMQ messages with Node.js?

Mon, Mar 9, 20, 00:00, 4 Years ago

View All

answered 9 Years ago lucillemariselal · Accepted Answer

Your code contains a number of errors, which is why it isn't working. (I don't think the submit event is even being bound to the form, because your jQuery selector doesn't look right: it should be #form or .form)

Here's a working solution:

HTML

<form id=form action=destination.html>

    <input type=file id=filePicker />

    <br/>

    <input type=submit value=Submit />

</form>

JS

var _URL = window.URL || window.webkitURL;



function isSupportedBrowser() {

    return window.File && window.FileReader && window.FileList && window.Image;

}



function getSelectedFile() {

    var fileInput = document.getElementById(filePicker);

    var fileIsSelected = fileInput && fileInput.files && fileInput.files[0];

    if (fileIsSelected)

        return fileInput.files[0];

    else

        return false;

}



function isGoodImage(file) {

    var deferred = jQuery.Deferred();

    var image = new Image();



    image.onload = function() {

        // Check if image is bad/invalid

        if (this.width + this.height === 0) {

            this.onerror();

            return;

        }



        // Check the image resolution

        if (this.width >= 400 && this.height >= 400) {

            deferred.resolve(true);

        } else {

            alert(The image resolution is too low.);

            deferred.resolve(false);

        }

    };



    image.onerror = function() {

        alert(Invalid image. Please select an image file.);

        deferred.resolve(false);

    }



    image.src = _URL.createObjectURL(file);



    return deferred.promise();

}





$(#form).submit(function(event) {

    var form = this;



    if (isSupportedBrowser()) {

        event.preventDefault(); //Stop the submit for now



        var file = getSelectedFile();

        if (!file) {

            alert(Please select an image file.);

            return;

        }



        isGoodImage(file).then(function(isGood) {

            if (isGood)

                form.submit();

        });

    }

});

isSupportedBrowser() makes sure that the user's browser supports the required functions before attempting to check the image.

getSelectedFile() makes sure the user has picked a file, and then passes the file data back.

isGoodImage() takes the file data and attempts to construct an image element from it. If onerror is fired, it's not an image or is a corrupted file. If onload is fired, it does a sanity check to make sure the image has valid dimensions, and then validates that the resolution is above 400x400.

Since onerror and onload events are fired asynchronously, the function needs to pass back a promise indicating the result of the validation.

Finally, the submit handler on the form ties all these method calls together and only allows the form to submit if the resolution check comes back good.

Link to fiddle: http://jsfiddle.net/uwj85m7d/7/

Edit As requested, a variant that shows divs containing error messages instead of alert popups: http://jsfiddle.net/uwj85m7d/8/