vue-upload-component icon indicating copy to clipboard operation
vue-upload-component copied to clipboard

How to get width/height of any uploaded file

Open PetroGromovo opened this issue 5 years ago • 1 comments

Hello! Looking how vue-upload-component works and 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.

Thanks!

PetroGromovo avatar Aug 01 '19 15:08 PetroGromovo

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

sergeynilov avatar Aug 09 '19 07:08 sergeynilov