En este ejemplo, aprenderemos a subir archivos con React Hook Form, que es muy preferido para gestionar formularios con React. Usaremos FormData para subir un archivo y subiremos un archivo de tipo multipart/form-data.
Índice de contenido
1. Introducción
2. Crear un servidor Express
3. Crear un proyecto React
4. Cargas de archivos multiparte con el formulario React Hook
5. ¿Buscas un framework web React?
6. ¿Cómo subir archivos en varias partes con Refine y React Hook Form?
Introducción
Se examinará paso a paso cómo utilizar el proceso de subida de archivos Multipart, que generalmente se utiliza para subir una imagen o un archivo a un servidor, con React Hook Form. Lo primero, crear un simple servidor express para subir los archivos. Luego, a subir los archivos a este servidor con el formulario React Hook.
Crear un servidor Express
A continuación, vamos a instalar el paquete cors necesario para permitir la subida de archivos al servidor, y el paquete express-fileupload para gestionar las rutas de los archivos descargados.
Hemos completado nuestras instalaciones para crear un servidor simple. Este servidor indicará que el archivo se ha subido con éxito o no, en respuesta a una llamada POST a un endpoint que hemos especificado.
Ya se ha creado un servidor con Express.
Como puedes ver, se ha iniciado con éxito nuestro servidor, ahora tenemos un endpoint para manejar las peticiones a este puerto. Ahora vamos a crear un proyecto React y enviar los archivos a este servidor con React Hook Form.
Crear un proyecto React
Vamos a crear un proyecto React con Create React App y luego instalar los paquetes necesarios para el proyecto.
Después de que tu proyecto esté listo, vamos a ir al directorio de nuestro proyecto e instalar el paquete React Hook Form.
Carga de archivos multiparte con el formulario React Hook
Ya se ha creado el proyecto React y también se instalo el paquete react hook form. Lo siguiente es crear un formulario y gestionarlo con el react hook form.
Para manejar nuestro formulario y sus elementos, definimos los métodos register y handleSubmit del formulario hook de react. Ahora, vamos a subir el archivo seleccionado en nuestro método onSubmit a nuestro servidor colocándolo en el formData.
¡Nuestro proyecto está listo! Con React Hook Form, ahora podemos enviar el archivo seleccionado a nuestro servidor en tipo multipart/form-data.
¿Buscas un framework web React?
Un marco de trabajo basado en React para la construcción de herramientas internas, rápidamente. refine ofrece un montón de funcionalidad fuera de la caja para el desarrollo rápido, sin comprometer la personalización extrema. Los casos de uso incluyen, pero no se limitan a los paneles de administración, las aplicaciones B2B y los paneles de control.
- Headless: Funciona con cualquier framework de interfaz de usuario
- Zero-configuration: Configuración de una sola línea con la superplaca. Se tarda menos de un minuto en iniciar un proyecto.
- Out-of-the-box: Enrutamiento, redes, autenticación, gestión de estados, i18n y UI.
- Backend Agnostic: Se conecta a cualquier backend personalizado. Soporte incorporado para REST API, Strapi, NestJs CRUD, Hasura, Nhost, Airtable, Supabase, Appwrite y Altogic.
- Native Typescript Core: Siempre se puede optar por el JavaScript simple.
- Enterprise UI: Funciona perfectamente con el sistema de diseño Ant. (La compatibilidad con múltiples marcos de interfaz de usuario está en la hoja de ruta)
- Boilerplate-free Code: Mantiene su código base limpio y legible.
Consulte la documentación de refine para obtener más información. →
¿Cómo subir archivos en varias partes con Refine y React Hook Form?
Le permite gestionar sus formularios y enviar datos a su servidor con el adaptador refine-react-hook-form que publica con su función refine headless. Con este adaptador, usted puede utilizar todas las características del formulario de React hook con refine. También puede realizar la operación de Multipart file Upload(multipart/form-data) muy fácilmente usando este adaptador.
Consulte la documentación del adaptador refine-react-hook-form para obtener información detallada. →
Puede gestionar su formulario muy fácilmente con adaptader refine-react-hook-form. Los datos creados en el formulario se guardarán automáticamente en la base de datos con el método refine onFinish.
Esta es una aplicación CMS básica que fue creada con la función refine's headless. Puedes construir rápidamente registros y guardarlos en tu base de datos usando refine. Veremos la página CreatePost de este paso. Crearemos un registro en el formulario y lo gestionaremos con el adaptador refine-react-hook-form.
Refine Create Post Page:
Resultado:
Como puedes ver, hemos guardado fácilmente nuestros datos como el título, la categoría, el estado y una imagen en forma de multipart/form-data a nuestra base de datos utilizando el adaptador refine-react-hook-form y este ha sido el resultado.
Obten el codigo utilizado aqui
¡Gracias por llegar hasta aquí!