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

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>

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.

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.

You can write something like this if you want to gracefully display the name of the uploaded file.

<div style="display:flex; flex-direction: row;">
  <input type="text" disabled value="{{fileName}}">
  <button (click)="fileInput.click()">File Upload </button>
  <input #fileInput type="file" (change)="onChange($event)" style="display:none"/>
</div>

In your TS file you'll have to make following changes

  fileName: string = "";
  onChange(event) {
    this.fileName = event.target.files[0].name;
  }