¿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, como input file, 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 del input file, 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 del tipo file, ¿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 para el input file react.
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 a el input file react.
Aunque no podemos controlar este tipo de input file react, lo que sí podemos hacer es otorgarle un evento onChange al tipo file. 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 sobre el tipo file.
¿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 y seguir aprendiendo sobre input file? ¡Inscríbete ya!
