How to make an uploaded file "clickable" on Angular?

Question

I'm following this guide https://blog.angular-university.io/angular-file-upload/ to create a file upload on my project. It's working properly with this code:

<input type="file" class="file-input (change)="onFileSelected($event)" #fileUpload>

<div class="file-upload">
   {{fileName || "No file uploaded yet."}}
    <button mat-mini-fab color="primary" class="upload-btn"
      (click)="fileUpload.click()">
        <mat-icon>attach_file</mat-icon>
    </button>
</div>

and:

onFileSelected(event) {
   const file:File = event.target.files[0];
   if (file) {
      this.fileName = file.name;
      const formData = new FormData();
      formData.append("thumbnail", file);
      const upload$ = this.http.post("/api/thumbnail-upload", formData);
      upload$.subscribe();
   }
}

This line {{fileName || "No file uploaded yet."}} {{fileName || "No file uploaded yet."}} lets me see the name of the file uploaded, but I'd like to have this name "clickable" and open the file I uploaded. How can I do it?

EDIT: The file uploaded it's either a pdf or an image, and I'd like to open it once clicked.

Answer 1

You should try below solution

In HTML

<input type="file" id="fileUpload" class="file-input (change)="onFileSelected($event)" #fileUpload>

<div class="file-upload">
   {{fileName || "No file uploaded yet."}}
    <button mat-mini-fab color="primary" class="upload-btn"
      (click)="openFileUpload(fileUpload)">
        <mat-icon>attach_file</mat-icon>
    </button>
</div>

In TS

openFileUpload(fileUpload){
   document.getElementById("fileUpload").click();
}

onFileSelected(event) {
   const file:File = event.target.files[0];
   if (file) {
      this.fileName = file.name;
      const formData = new FormData();
      formData.append("thumbnail", file);
      const upload$ = this.http.post("/api/thumbnail-upload", formData);
      upload$.subscribe();
   }
}