Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

<input type="file" accept="image/*">

<button>Upload file</button>

How to trigger click event of input type=file from button's click event in Angular 2?

like image 629
amol Avatar asked May 19 '16 10:05

amol


5 Answers

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

like image 156
yurzui Avatar answered Oct 11 '22 15:10

yurzui


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>
like image 30
Pankaj Parkar Avatar answered Oct 11 '22 14:10

Pankaj Parkar


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.

like image 30
maSC0d3R Avatar answered Oct 11 '22 13:10

maSC0d3R


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.

like image 30
Mani deep Avatar answered Oct 11 '22 14:10

Mani deep


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;
  }
like image 21
Anurakt Ghosh Avatar answered Oct 11 '22 15:10

Anurakt Ghosh