How to trigger the file upload input in Angular?

Question

How to trigger the file upload input in Angular 4? I'm trying, but it's not working.

Instead of input button, I have to click on div and trigger the input type button.

app.html:

<input id="custom-input" type="file" > 
<div (click)="myEvent(custom-input)">
    Click here to upload file
</div>

app.ts:

myEvent(event) {
    alert("event");
    event.nativeElement.click();
}

Answer 1

1. Create the file upload input:

<input 
    hidden 
    type="file" 
    #uploader
    (change)="uploadFile($event)"
/>

2. Create a button to trigger a click on the file input:

<button (click)="uploader.click()">
    Upload
</button>

Then in your component you can use the $event:

uploadFile($event) {
    console.log($event.target.files[0]); // outputs the first file
}

Answer 2

HTML Template (attachment.component.html)

<input 
    style="display: none" 
    type="file" 
    multiple 
    (change)="onFileChanged($event)" 
    #fileInput
/>
<input 
    type="button" 
    class="upload-button" 
    value="Upload attachment(s)" 
    (click)="fileInput.click()" 
/>

Handling in Typescript(attachment.component.ts)

Third argument passed for the post call is for tracking the progress of upload using the event which we get subscribe to

onFileChanged(event) {
    this.selectedFile = event.target.files[0];
    this.http.post('url', uploadData, {
        reportProgress: true,
        observe: 'events'
    }).subscribe(event => {
        console.log('uploaded successfully');
    });
}