Uploading file with vue-upload-component can not get width/height of the file

Hello!
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 need to get width/height of any uploaded file.
I found a way with watch :

        watch: {
            avatarFiles(file){
                console.log("avatarFiles  file::")
                console.log( file )
                console.log( this.toObject(file) )

	            let uploadedImage= this.toObject(file)
	            console.log("uploadedImage[0].blob::")
	            console.log( uploadedImage[0].blob )

                var image = new FileReader(uploadedImage[0].blob);
                console.log("-2 avatarFiles image::")
                console.log(image)
                // console.log('image.width:::')
                // console.log(image.width)
                image.onload = (e) => {
                    console.log("INSIDE image.onload e::")
                    console.log( e )

                    console.log(`++the image dimensions are ${image.width}x${image.height}`);
                }
            }

I suppose that file varthat is just uploaded file and console output confirms this.
this.toObject is my method I use to convert from Observer class :

toObject(arr) {
    var rv = {};
    for (var i = 0; i < arr.length; ++i)
    rv[i] = arr[i];
    return rv;
},

But code inside of method

image.onload = (e) => {
   ...

is not triggered at all and in console I see error : https://imgur.com/a/vX60fMA
I see that in var uploadedImage[0].blob -valid path to uploaded image and I sent it for

   var image = new FileReader(uploadedImage[0].blob);
Bu

t why error in cosole and how to fix it ?

vuejs 2.6 / vue-slider-component 3.0.33

Thanks!

I uploaded this example live. Please, take a look at http://hostels2.my-demo-apps.tk/customer-register :
when image on 3rd tab is selected event is triggered.

But I see that onload is not triggered and error in method : https://imgur.com/a/oGZjJdc

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.