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.
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.
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.
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.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.