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)

Answer 1

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!!