How can I upload a file (pdf) to Firebase Storage after a button is clicked and then get the URL (using getDownloadURL() I guess?). After that, whenever a user is logged in the next time, they can download the file on the same page that they upload it.
Currently I managed to upload the file to firebase storage. But I still cannot save the file URL into firestore user’s document. and how can I get the file from firebase so that I can download it later?
I’m using Nuxt.js and Vuetify to do it.
template
<v-card>
<v-file-input
outlined
show-size
counter
prepend-icon="mdi-file-upload-outline"
:rules="fileRules"
accept=".pdf"
v-model="ssm"
style="margin: 1rem;">
</v-file-input>
<v-btn
@click="uploadFile">
Upload</v-btn>
</v-card>
script
data: () => ({
fileRules: [
value => !value || value.size < 2000000 || 'File size should not exceeded 1MB!',
],
ssm: '',
}),
methods: {
saveToFirestore() {
var data = {
ssm: this.ssm,
};
firestore
.collection('SubcontractorRegistration')
.doc(firebase.auth().currentUser.uid)
.update(data)
.then(() => {
console.log('hello world!')
})
},
uploadFile(file) {
var uidRef = firebase.auth().currentUser.uid
const filePath = `SubcontractorRegistration/${uidRef}/${file.name}`;
const metadata = { contentType: this.ssm.type };
FirebaseStorage.ref()
.child(filePath)
.put(this.ssm, metadata)
.then(() => {
FirebaseStorage
.ref()
.child(filePath)
.getDownloadURL()
.then((url) => {
this.ssm = url;
})
this.saveToFirestore();
alert("success!")
})
}
},
Just to add, it gives me these 2 error:
-
Before and after the file is uploaded.
=> [Vue warn]: Invalid prop: custom validator check failed for prop “value”. -
after file is upload
=> Uncaught (in promise) FirebaseError: Function DocumentReference.update() called with invalid data. Unsupported field value: a custom File object (found in field ssm in document Subcontractor/9e0b2xsNqrhVn0Coukko3BTHlj93)
Thank you!