PetroGromovo's avatar

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

But why error in cosole and how to fix it ?

vuejs 2.6 / vue-slider-component 3.0.33

Thanks!

0 likes
1 reply

Please or to participate in this conversation.