Scenario
The browser renders your file select button with the text Choose file:No File Chosen .
We want that button to say Select PDF.
Solution: Click the Button With a Different Button
First we hide the file select button and tag it with #hiddenfileinput:
<input style="display: none" type="file" (change)="onFileSelect($event)" #hiddenfileinput>Note that we have registered the file event handler with (change)="onFileSelect($event)". on the hidden input .
Next we create a proxy that will fire the click event on the hidden button and contain the text Select PDF.
<button (click)="hiddenfileinput.click()" class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>Select PDF</button>And that’s it. We have now created a proxy button with custom text and styling. “Big pimpin smokin Gs we be” (For the Jay Z fans).
