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í:

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:

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í:

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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Relacionado:  Limitar tamaño de archivo en input file

Únete a otros 750 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: