I successfully uploaded a file to Firebase Storage and save the URL link to firestore.
But after the process is completed. The console pop-up this error:
[Vue warn]: Invalid prop: custom validator check failed for prop "value".
and on my screen, it shows up this:
Again, it only happens after I successfully upload the file.
vue template:
<v-col cols="12" sm="6" md="12">
<v-file-input
outlined
show-size
prepend-icon="null"
accept=".pdf"
v-model="ProgramSummary"
:rules="required"
:disabled="processing"
style="width: 40%;">
<template v-slot:append-outer>
<v-progress-circular
v-if="processing"
indeterminate
color="red"
></v-progress-circular>
</template>
</v-file-input>
</v-col>
<v-col cols="12" sm="6" md="6">
<v-btn
color="green"
dark
class="float-right"
@click="uploadProgramSummary">
Upload
</v-btn>
</v-col>
script
data: () => ({
//PROGRAM SUMMARY FILE UPLOAD
processing: false,
required: [
value => !value || value.size < 1000000 || 'File size should not exceeded 1MB!',
],
ProgramSummary: [],
}),
methods: {
// SAVE UPLOADED FILE TO FIRESTORE
onUpload() {
var uidRef = firebase.auth().currentUser.uid;
var docRef = firestore
.collection("SubworkPackage")
.doc(firebase.auth().currentUser.uid)
.collection("ProgramSummary")
.doc();
var data = {
ProgramSummary: this.ProgramSummary,
uid: uidRef,
id: docRef,
};
firestore
.collection("SubcontractorRegistration")
.doc(firebase.auth().currentUser.uid)
.collection("ProgramSummary")
.add(data);
},
// PROGRAM SUMMARY UPLOAD FILE
uploadProgramSummary() {
//LOADING ICON SET TO TRUE
this.processing = true;
//DOC REFERENCE OF USER ID
var uidRef = firebase.auth().currentUser.uid;
// DOC NAME IS SET TO HAVE A FIXED NAME
var programSummaryRef = "ProgramSummary.pdf"
// FILE PATH
const filePath = `SubcontractorRegistration/${uidRef}/${programSummaryRef}`;
// METADATA
const metadata = { contentType: this.ProgramSummary.type };
//FIREBASE STORAGE ACTION
FirebaseStorage
.ref()
.child(filePath)
.put(this.ProgramSummary, metadata)
.then(() => {
FirebaseStorage
.ref()
.child(filePath)
.put(this.ProgramSummary, metadata)
.snapshot
.ref
.getDownloadURL()
.then((url) => {
this.ProgramSummary = url;
this.onUpload();
this.processing = false;
alert("Program Summary Succesfully Uploaded!")
})
})
},
}
I’m using Nuxt and Firebase with Vuetify as the UI library.