0

I have the following input field of type 'file':

<input id="company_logo" name="company_logo" type="file" accept="image/png,image/jpg,image/jpeg">
<img id="logo_preview" src="#" alt="Your Logo" />

I am using the following code to preview the uploaded image once a valid file has been selected:

$("#company_logo").change(function() {
            displayUploadedLogo(this);
        });

function displayUploadedLogo(input) {
        if (input.files && input.files[0]) {

            var file = input.files[0];
            var fileType = file["type"];
            var ValidImageTypes = ["image/jpg", "image/jpeg", "image/png"];

            if ($.inArray(fileType, ValidImageTypes) > 0) {

                // If uploaded image is within array of valid image types
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#logo_preview')
                        .attr('src', e.target.result)
                        .width(75)
                        .height(75)
                        .css('display', 'block');
                };

                reader.readAsDataURL(input.files[0]);
            } else {
                // Uploaded file is not an image
                $('#logo_preview').css('display', 'none');
            }
        }
    }

This bascially works, but I would like to additionally validate that the selected image has a specific image size (e.g. 200 x 200 pixels). Images that do not comply with the size requirements (larger or smaller), should be rejected with an error messages.

Would appreciate your advice how to go about this.

  • Possible duplicate of: http://stackoverflow.com/questions/3717793/javascript-file-upload-size-validation – Adam Wolski Jan 16 '17 at 18:43
  • 1
    @AdamWolski note that the question was about the dimensions of the image (and not the file-size). – Dekel Jan 16 '17 at 18:45
  • I am not looking for file size. I would like to validate image dimensions. –  Jan 16 '17 at 18:45
  • 1
    Och, sorry you're right, well then duplicate of http://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript – Adam Wolski Jan 16 '17 at 18:46
  • Possible duplicate of [Check image width and height before upload with Javascript](http://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript) – Heretic Monkey Jan 16 '17 at 18:48

0 Answers0