How to create a custom file upload button in Angular

Question

I'd like to replace the "Choose File" text and ugly styling of the <input type="file" /> button with some other text such as "Upload" and nice styling, perhaps using a mat-button. What is the cleanest way to achieve this without installing any extra file-upload packages?

Answer 1

Use below template:

.html:

<button type="button" (click)="fileInput.click()">
  <span>Upload</span>
  <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</button>

The on-click function will prompt the user to select a file.