HTML5 Form Check image width and height and alert if bigger

Question

EDIT

NOT A DUPLICATED

Need to stop the form submit if the file is bigger in dimension not in size. Some answers in other posts are about file size, my question is about dimensions. Size and dimensions are 2 different things ...

I am using the following form to upload images. It is working fine but because it is a store and I want the catalog of products to looks nice I need the images uploaded to be exactly 200px width and 200px height. If the image is bigger in width or height I need to show an alert so the uploader chose another image or edit the one he is trying to upload.

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('here we have to do something');
        });
    </script>

</form>

google search found me a similar question: http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation — Don Cheadle, Jul 18 '16 at 02:25
my previous link-edit was about "size", using the File API. This one is directly related to width + height validation: http://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript — Don Cheadle, Jul 18 '16 at 02:42
you know the answer you marked as correct is a copy and paste of another question/answer :) this is a duplicate. — Don Cheadle, Jul 18 '16 at 03:23
Then show me the link to the exact other solution and I will believe you... I readed a lot of other similar answers and no one is about not submit a form if image is bigger in only width and height. Also the guy answering fixed the code for what I need. I do not need to check if the file is 10 MB or 2 MB I need to stop the form submit if the image is larger in dimension. Dimension is not the same as size ... Show me the link and solution — Kamikaza, Jul 18 '16 at 03:29
The link `Is it possible to check dimensions of image before uploading?` in jusysayno's answer is where he got the content of his answer from -> http://stackoverflow.com/questions/13572129/is-it-possible-to-check-dimensions-of-image-before-uploading#answer-13572240 — Don Cheadle, Jul 18 '16 at 03:41

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

Possible duplicate? Taken from answer here and adapted for you:

Is it possible to check dimensions of image before uploading?

I would agree with above answer and do it on the form submit:

$( document ).ready(function() {
$("#ImageForm").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("#image-file")[0],
        file = fileInput.files && fileInput.files[0];
 console.log(file)
    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 <= 200 && height <= 200) {
                form.submit();
            }
            else {
                alert('too big');
            }
        };
    }
    else { //No file was input or browser doesn't support client side reading
        form.submit();
    }

});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ImageForm" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />
</form>

As the answer in my link says you need to also check this server side as a) you cannot ever trust the client b) older browsers might not work.

edited May 23 '17 at 10:28

Community

1
1

answered Jul 18 '16 at 02:28

sethreidnz

584
5
17

Seems like you are the only that understand the difference between check file size and checking width-height... I will give it a try – Kamikaza Jul 18 '16 at 02:30
no working I tested with Chrome and the forms submits without warning – Kamikaza Jul 18 '16 at 02:38
Fixed it. I'd messad up the $("#ImageForm") selector without having a '#'. Js Fiddle https://jsfiddle.net/uL1xgjbp/1/ – sethreidnz Jul 18 '16 at 02:51
I have changed this to a <= so that if the image is smaller than 200 or equal to 200 then it will submit. Otherwise it will show alert box. – sethreidnz Jul 18 '16 at 02:57
It is working almost perfect so I mark your solution as correct. – Kamikaza Jul 18 '16 at 03:02
The only thing is, that I get 2 alerts now the "hello and the too big" but it seems like you edited it – Kamikaza Jul 18 '16 at 03:03
I tested now and it works perfect, up to 200 x200 no warning and file submits, from 201 x 201 px it gets the warning and the image does not submits. Thanks a lot very much – Kamikaza Jul 18 '16 at 03:07
All good! Yes I added some unnecessary alerts when testing it out. Glad to help! – sethreidnz Jul 18 '16 at 03:32
I am trying to make the javascript alert of your code looks nice, any ideas? here is the link http://stackoverflow.com/questions/38428583/making-a-jquery-alert-box-with-current-code – Kamikaza Jul 18 '16 at 04:27
Isn't there an answer in the question linked? – sethreidnz Jul 19 '16 at 01:53

HTML5 Form Check image width and height and alert if bigger

1 Answers1