How can i get image height and image width with FileReader and VueJs?

Question

I have an input type file

<input type="file" class="userUploadButton" name="image" accept="image/*" on-change={this.setImage}/>

and Vue - method "setImage"

    setImage(e){
        const file = e.target.files[0];

        if (!file.type.includes('image/')) {

            Vue.swal({
                title: 'Error!',
                text: 'This is no image',
                type: 'error',
            });

            return;
        }

        if(typeof FileReader === 'function'){

            const reader = new FileReader();

            reader.onload = (event) => {
                this.imgSrc = event.target.result;
                this.$refs.cropper.replace(event.target.result);
            };

            reader.readAsDataURL(file);

        }else{

            Vue.swal({
                title: 'Error',
                text: 'Your browser does not support FileReader API',
                type: 'error',
            });

        }

    },

In the moment when user upload an image, I have to check width and height of this image and stop uploading (or delete the image)

okay but the file is just a file, you need to create an image and then u will able to get image width and height — Santosh Shinde, Feb 27 '18 at 08:32
Possible duplicate of [Getting width & height of an image with filereader](https://stackoverflow.com/questions/15491193/getting-width-height-of-an-image-with-filereader) — Ferrybig, Feb 27 '18 at 08:37

Santosh Shinde · Accepted Answer · 2018-02-27T08:46:59.007

Actually, the file is just a file, you need to create an image using new Image() from the file source.

Please check example to here and the same type of question to here.

Use the following source code

   var width, height;

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

   img = new Image();

   img.onload = function() {
       // here you got the width and height
       width = this.width;
       height = this.height;
   };

   img.onerror = function() {
       alert( "not a valid file: " + file.type);
   };

   img.src = _URL.createObjectURL(file);

Hopes this will help you!!

How can i get image height and image width with FileReader and VueJs?

1 Answers1

Linked