I'm trying to make an upload button because I don't want to use the HTML upload button, how can I call a click event on the input element to open the file browser manually?
<div class="upload-button button" (click)="selectFile()">
Upload
<input type="file">
</div>
I would do it with the # decorator in the view. This way we can give the input a name and just call name.click() to call it from a button for example:
<button (click)="fileSelect.click()">Click me for fun!</button>
<input style="display: none" #fileSelect type="file">
The # according to docs: "Creates a local variable that provides access to the element instance in data-binding and event-binding expressions in the current template." Cheatsheet
Just click will make it work as per my understanding:
<div class="upload-button button" (click)="file.click()">
Upload
<input type="file" #file>
</div>Hope it helps!
