En este post te mostraré cómo obtener los archivos seleccionados en un input de tipo file usando Angular. Vamos a obtener una referencia al elemento del DOM y luego acceder a la propiedad files.
Agregar referencia a input
Comenzamos agregando una referencia al input para que más tarde nos podamos referir a él. En este caso lo haré así:
<input #foto required id="fotos" multiple type="file">
Fíjate en que estoy usando #foto
para referirme a ese input.
Definir ElementRef
Ahora debemos tener un ElementRef
dentro del componente en TypeScript. Para ello hacemos lo siguiente:
@ViewChild("foto", {
read: ElementRef
}) foto: ElementRef;
Mi variable se llama foto
, aunque es una coincidencia pues puede llamarse como gustes. Eso sí, en el primer argumento del decorador de ViewChild debes colocar el nombre que pusiste después del #
en el elemento.
Acceder a archivos de input desde Angular
Ya tenemos una referencia al elemento tal y como si lo hubiéramos hecho con querySelector, dentro de this.foto.nativeElement.
Ahora para acceder a sus archivos accedemos a this.foto.nativeElement.files
así:
let archivos = this.foto.nativeElement.files;
No olvides que en este caso this.foto
se refiere al elemento que definimos con ViewChild
, que nativeElement
se refiere al elemento nativo y que files
es la propiedad que tiene un elemento DOM de tipo input file.