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

Question

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://imgur.com/a/40epviI
What is wrong ?

Answer 1

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}`);
}
}
}