Get files from Firebase Storage & display in the file text input

I managed to successfully upload a file to Firebase Storage. Then, I save the downloadURL and id information of the file to firebase storage.

I also created a "Download" button where after the user clicked it, it will download the file from Firebase Storage.

But, I don't want to do that. I want it to be done as the flows stated below:

1. User upload file. (done)
2. detail of the files (id, downloadURL) is saved in firestore. (done)
3. The next user login/page refresh, the file will display on the same file input field that I used to upload the file, if the file exists.

4. User can click on to file and view the file on the next chrome tab.
5. Users can then download the file if they want.

HTML

<v-row>
    <v-col cols="12" sm="6" md="12">
        <h2 style="margin-left: 3%;">
            Program Summary
        </h2>
    </v-col>
    <v-col cols="12" sm="6" md="12">
        <v-file-input
            outlined
            show-size
            prepend-icon="null"
            accept=".pdf"
            v-model="ProgramSummary"
            
            :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.prevent="uploadProgramSummary">
                Upload
        </v-btn>
    </v-col>
    <v-col cols="12" sm="6" md="6"></v-col>
    <v-col cols="12" sm="6" md="6">
        <v-btn
            color="red"
            dark
            class="float-right"
            @click.prevent="downloadFile">
                Download
        </v-btn>
    </v-col>
</v-row>

script

// 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("SubworkPackage")
        .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
    var filePath = `WorkPackageContractor/${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!")
                })
        })
},

How to do no. 3 and 4?

I'm using Nuxt and Vuetify UI library and Firebase for my project.

Thank you in advance.