how to trigger click event of input file from button click in angular 2?

Answer 1

In Angular 4,

HTML:

<input #fileUpload type="file" (click)="fileUpload.value = null"(change)="importFile($event)" style="display:none"
accept="image/*">
<button (click)="fileUpload.click()">  </button>

Typescript:

importFile(event) {

if (event.target.files.length == 0) {
   console.log("No file selected!");
   return
}
  let file: File = event.target.files[0];
  // after here 'file' can be accessed and used for further process
}

On considering the future issue of selecting same file not working, In input tag click event we are setting to null, which allows same file to select second time.

Answer 2

In Angular 4,

HTML:

<ion-input type="file" formControlName="avatar"></ion-input>
<button type="button" ion-button (click)="selectFile()"></button>

Javascript:

selectFile() {
    let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
    element.click();
}

It's work for me.

Answer 3

You can leverage template reference variable as follows:

<input type="file" accept="image/*" #file>
<button (click)="file.click()">Upload file</button>

The corresponding plunkr is here https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview

Answer 4

You could do have declare variable for input file field as #file & then only file change do call upload function to pass uploaded file to function.

<input #file type="file" accept="image/*" (change)="upload(file.files)">

<button #upload (click)="file.click()">Upload file</button>