La gestión de archivos y la subida de archivos son características comunes en muchas aplicaciones web modernas, como al subir imágenes de perfil, documentos o cualquier otro tipo de archivo. React facilita la integración de formularios de subida de archivos con la API nativa de JavaScript, y también permite el manejo de archivos de manera eficiente con librerías y soluciones externas.

En este capítulo, aprenderemos cómo implementar la subida de archivos en React, cómo gestionar su estado y cómo interactuar con un servidor backend para almacenar los archivos.

Input de Subida de Archivos en React

La forma más básica de gestionar la subida de archivos en React es mediante un campo de entrada HTML de tipo file. Puedes utilizar el estado de React para almacenar la referencia al archivo seleccionado y luego enviarlo al servidor.

Ejemplo Básico de Subida de Archivos

Aquí tienes un ejemplo simple de un formulario que permite la subida de archivos:

jsx

En este ejemplo, el componente FileUpload permite al usuario seleccionar un archivo y subirlo a un servidor utilizando la API fetch. Utilizamos FormData para preparar el archivo y enviarlo como parte de la solicitud POST.

Manejo de Múltiples Archivos

A veces, es necesario permitir que los usuarios suban múltiples archivos al mismo tiempo. Esto se puede lograr añadiendo el atributo multiple al input de archivo y manejando un array de archivos en el estado de React.

Ejemplo de Subida de Múltiples Archivos

jsx

Este ejemplo permite la selección y subida de múltiples archivos, manejando cada uno dentro de un array en el estado de React. Al enviar el formulario, todos los archivos se envían en una sola solicitud POST.

Validación y Previsualización de Archivos

Antes de subir un archivo, es importante validar que cumple con los requisitos de la aplicación, como el tamaño o el tipo del archivo. También puedes permitir que los usuarios previsualicen archivos como imágenes antes de subirlos.

Validación de Archivos

Aquí tienes un ejemplo de cómo validar que el archivo no supere un tamaño máximo:

jsx

Previsualización de Imágenes

Si estás permitiendo la subida de imágenes, puedes mostrar una previsualización de la imagen antes de que el usuario la suba:

jsx

Este componente permite al usuario ver una vista previa de la imagen que ha seleccionado antes de subirla al servidor.

Uso de Librerías Externas: React Dropzone

Para mejorar la experiencia de usuario en la subida de archivos, puedes usar librerías como React Dropzone, que permiten a los usuarios arrastrar y soltar archivos en lugar de solo seleccionarlos.

Instalación

bash

Ejemplo con React Dropzone

jsx

React Dropzone mejora la experiencia de usuario al permitir la funcionalidad de arrastrar y soltar para la selección de archivos.

Conclusión

El manejo de archivos y subidas es una característica importante en muchas aplicaciones web. Ya sea utilizando inputs simples o librerías como React Dropzone, React ofrece múltiples formas de gestionar este proceso de manera eficiente.