file - trigger - ¿Cómo activar el evento de clic del archivo de entrada desde el botón de clic en angular 2?

trigger click angular 4

Question

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

<button>Upload file</button>

¿Cómo activar el evento de clic del tipo de entrada = archivo desde el evento de clic del botón en Angular 2?

Answer 1

En angular 4,

HTML:

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

Mecanografiado:

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
}

Al considerar el problema futuro de seleccionar el mismo archivo que no funciona, en el evento de clic de etiqueta de entrada estamos configurando un valor nulo, lo que permite que el mismo archivo se seleccione por segunda vez.

Answer 2

En 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();
}

Es un trabajo para mí.

Answer 3

Es posible que haya declarado la variable para el campo de archivo de entrada como #file y luego solo el cambio de archivo llame a la función de upload para pasar el archivo cargado a la función.

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

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

Answer 4

Puede aprovechar la variable de referencia de plantilla de la siguiente manera:

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

El plunkr correspondiente está aquí https://plnkr.co/edit/JB4HY0oxEUgXXIht2wAv?p=preview