CODEWITHSUNDEEP
vue.jsfilereader
Viktor
Viktor

Reputation: 1702

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

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)

Upvotes: 5

Views: 12541

Answers (1)

Santosh Shinde
Santosh Shinde

Reputation: 6053

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

Upvotes: 7

Related Questions