I'm Aristide and I'm new using PrimeVue.
I faced to a problem, I want to upload a picture but dont know how to proced with FileUpload component.
I use firestorage and firestore.
I need a custom upload:
1. Form fields are filed (= image also selected)
2. Click save button
- Upload file to Firestorage
- Get back the image url
- Save user form information into Firestore
Code: Select all
<intput type="file" name="userpic" @change="previewPec" class="form-input" id="photo" />
export default()
{
data(){
return{
user{
photo: null
}
}
),
method: {
previewPec(evt){
//console.log('uploading');
let file = evt.target.files[0];
//console.log(file);
let reader = new FileReader();
// 2111775 = 2 MB en base64
if(file['size'] < 2111775){
reader.onloadend = (file) => {
//console.log('RESULT : ', reader.result);
this.user.photo = reader.result;
}
reader.readAsDataURL(file);
}else {
swal({
type: 'error',
'title': 'Oops...',
'text': 'You are uploading a large file (limit size is less than 2MB)'
})
}
}
}
}
How to write custom upload using PrimeVue FileUpload component like above?
Can I mixe standard HTML component with primevue component ?
Thank you.