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
– Santosh Shinde, Commented Feb 27, 2018 at 8:32
Possible duplicate of Getting width & height of an image with filereader — Ferrybig
– Ferrybig, Commented Feb 27, 2018 at 8:37

Santosh Shinde · Accepted Answer · 2018-02-27 08:46:59Z

7

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

edited Feb 27, 2018 at 8:46

answered Feb 27, 2018 at 8:39

Santosh Shinde

6,0539 gold badges46 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related