Upload pdf file to Firebase Storage, save link to firestore, and can download the pdf file after refresh with Nuxt & Vuetify

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:

  1. Before and after the file is uploaded.
    => [Vue warn]: Invalid prop: custom validator check failed for prop “value”.

  2. 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!