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?

Yaobin Then · Accepted Answer · 2021-09-28 01:14:16Z

65

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.

edited Sep 28, 2021 at 1:14

Yaobin Then

2,8421 gold badge37 silver badges56 bronze badges

answered Dec 2, 2018 at 21:53

Peter Kim

1,99715 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

galki Over a year ago

That's it, thanks! Btw, any difference putting button and input side-by-side instead of nesting the input inside button?

Peter Kim Over a year ago

No problem! I believe there's no difference.

Huw Roberts Over a year ago

Perfect @PeterKim - exactly what I needed to. Thank you.

AllJs Over a year ago

The greatest answer of all times. Thanks a lot. Upvoted

Collectives™ on Stack Overflow

How to create a custom file upload button in Angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related