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
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!
Please or to participate in this conversation.