Input de tipo file en React

Autor: | Última modificación: 14 de septiembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿Conoces el el input de tipo file en React? React nos da muchas opciones para permitir al usuario interactuar con nuestra aplicación. Los formularios son una de estas opciones, pues nos dan la posibilidad de crear espacios en los que el usuario sube sus datos, ya sean textos, imágenes o acciones.

En este post, te enseñaremos qué es y cómo funciona el input de tipo file en React, uno de los datos que podemos insertar en un formulario.

¿Qué es el input de tipo file en React?

El input de tipo file es un elemento que podemos insertar en los formularios de React para permitir que el usuario inserte un archivo dentro de nuestra aplicación. Un espacio donde se usa mucho el input de tipo fichero es en las fotos de perfil. De manera simple, una foto de perfil es un espacio en el que el usuario puede subir un archivo, en este caso una imagen, que se procesará dentro de nuestra aplicación.

En otros posts hemos visto cómo funcionan los input de tipo checkbox en React, la etiqueta select en React, el input de tipo radio y textarea en React. Aunque estos input resultan en diversos elementos y se controlan usando distintas propiedades (value vs checked), normalmente funcionan de manera similar. El input de tipo file en React se distingue un poco del resto y, a continuación, te explicamos cómo funciona.

¿Cómo funciona el input de tipo file en React?

Para crear un input de tipo file en React, basta con escribir la siguiente línea de código:

<input type= «file»/>

Al escribir esta línea de código, cada navegador nos pintará un elemento un poco distinto. En el caso de Chrome, veremos una botón con el texto choose file que nos permitirá subir un archivo.

Ahora que tenemos este elemento, ¿cómo lo controlamos? Esta es la diferencia con un input de tipo file en React: no lo podemos controlar. Es decir, no podemos insertarle la propiedad value ni la propiedad checked.

Esto se desvía un poco de lo que hemos aprendido en nuestro post sobre formularios como componentes controlados en React. Sin embargo, tiene todo el sentido del mundo. Finalmente, la idea detrás de un input de tipo file en React es que el usuario suba un archivo. Entonces, no podemos insertar un valor para este archivo, pues solo podemos insertar valores de tipo string o number.

Aunque no podemos controlar este tipo de input, lo que sí podemos hacer es otorgarle un evento onChange. Recuerda que el evento onChange en React nos permite capturar eventos para acceder a sus datos. Para aprender cómo acceder a los datos de un archivo en este tipo de input, te invitamos a leer la sección getting information on selected files en la MDN.

¿Qué sigue?

Ahora que sabes qué es y cómo funciona el input de tipo file en React, te invitamos a seguir aprendiendo sobre herramientas de programación para la web en nuestro Desarrollo Web Full Stack Bootcamp. Allí, además de React, aprenderás a dominar lenguajes de programación como Javascript, HTML y CSS. ¿A qué esperas para convertirte en un desarrollador web? ¡Inscríbete ya!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!