CODEWITHSUNDEEP
vuejs2
Petro Gromovo
Petro Gromovo

Reputation: 2241

Get width/height of uploaded by vue-upload-component image

Looking how vue-upload-component works (https://lian-yue.github.io/vue-upload-component/#/documents) on events when file is uploaded I see structure of avatarFiles array with uploaded file:

            <file-upload
                    ref="upload"
                    v-model="avatarFiles"
                    post-action="/post.method"
                    put-action="/put.method"
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :multiple="false"
                    class="btn btn-outline-danger btn-sm"
            >
                Upload avatar
            </file-upload>

I do not see width/height of any uploaded file. If there is a way to add this info too? Or some other vuejs way to get width/height of any uploaded file ?

vuejs 2.6

I try to check event when image is uploaded with:

MODIFIED :

watch:{
    avatarFiles(file){
        console.log("-1 avatarFiles file::")
        console.log( file )

        var image = new FileReader();
        console.log("-2 avatarFiles image::")
        console.log( image )
        image.onload = () => {
            console.log("-3 avatarFiles file::")
            console.log( file )
            console.log(`the image dimensions are ${img.width}x${img.height}`);
        }
    }

},

But image.onload is not triggered and in console I see some error message: https://i.sstatic.net/Y7LMS.jpg

What is wrong ?

Upvotes: 0

Views: 1290

Answers (1)

Kenneth
Kenneth

Reputation: 2993

Try to watch your avatarFiles model, then read file using FileReader.

example codes:

watch:{
   avatarFiles(file){
          var image = new FileReader();
          image.onload = () => {
           console.log(`the image dimensions are ${image.width}x${image.height}`);
          }
      }

    }

Upvotes: 1

Related Questions