Know if image is overzised

Question

I`m creating a function to upload an image. But it won´t over 400px of height and 400px of width, this is part of the code

$(() => {
    $(document).on('change', 'input', function (e) {
        let file = event.target.files[0];
        if (!file) {
            e.preventDefault();
            return;
        }else{
            let imageType = /image.*/;
            if (!file.type.match(imageType)) {
                e.preventDefault();
                return;
            }else {
                let reader = new FileReader();
                reader.onload = () => {
                    $('img').attr('src', reader.result);
                }
                reader.readAsDataURL(file);
            }
        }
        //What to do here?
        if ( width > 400 || height > 400) {
            console.log('oversized');
            
        }
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file">
<img src="">

It is not working, how could I validate if the image and not the img tag is oversized, I created this code with Jquery to fast problem replication, but, if you can help me with vanilla Javascript, it will be awesome

You can access the `naturalHeight` and/or `naturalWidth` of the [`HTMLImageElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) once it's available to your script ([Can I Use compatibility](https://caniuse.com/#feat=img-naturalwidth-naturalheight)). — David Thomas, May 31 '19 at 23:14
If I remember correctly, the CSS height and width properties won't return an integer, they return a string like `100px` — Sterling Archer, May 31 '19 at 23:15
Possible duplicate of [Get the real width and height of an image with JavaScript? (in Safari/Chrome)](https://stackoverflow.com/questions/318630/get-the-real-width-and-height-of-an-image-with-javascript-in-safari-chrome) — Herohtar, May 31 '19 at 23:16
Yup, just ran your code with a console.log statement around the height and width (hint hint debugging ;)) and it returned `0px 0px` — Sterling Archer, May 31 '19 at 23:18
https://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript second and third answer are what you are looking for -- accepted answer is wrong. — dev, May 31 '19 at 23:19
I edited my question, I wont take the height of img tag, I want the size of the real image, for example `reader.result.height` — Alberto Siurob, May 31 '19 at 23:22

Ghoul Ahmed · Answer 1 · 2019-05-31T23:49:05.617

Try this:

$(() => {
    $(document).on('change', 'input', function (e) {
        let file = event.target.files[0];
   
        if (!file) {
            e.preventDefault();
            return;
        }else{
            let imageType = /image.*/;
            if (!file.type.match(imageType)) {
                e.preventDefault();
                return;
            }else {
                let reader = new FileReader();
                reader.onload = () => {
                this.imagePreview = new Image();
                this.imagePreview.onload = (imageEvent) => {

                  if (this.imagePreview.width > 400 || this.imagePreview.height > 400) {
   alert(`Allowed dimensions are 400x400 px`);
   return;
    }
  };
                  
                 this.imagePreview.src = reader.result;
                 $('img').attr('src', reader.result);
                }
                reader.readAsDataURL(file);
            }
        }
         
    });
})

 
<input type="file" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Know if image is overzised

1 Answers1