logotipo de formik El propósito de esta publicación es mostrar algunas cosas con las que algunas personas pueden tener problemas al comenzar a trabajar con . Formik Si aún no conoce Formik, consulte su o estas publicaciones: Github La alegría de las formas con React y Formik Mejores formularios React con Formik (escrito por mí) Painless React Forms con Formik Voy a hacer que estos ejemplos sean simples y comprensibles para propósitos de demostración. ¡También voy a omitir algunas características intencionalmente para poder lanzarte algunos desafíos al final! Subiendo un archivo 📎 Estoy bastante seguro de que todos hemos intentado cargar archivos en formularios. En los documentos de Formik no hay indicaciones ni instrucciones para cargar archivos, pero es tan simple como manejar un cuadro . de selección de reacción Todo lo que realmente necesita es una entrada para los valores de Formik (en este caso llamado y configurar para usar la función de Formiks. ¡Recuerde que podemos acceder fácilmente al archivo cargado usando archivo) onChange setFieldValue event.currentTarget.files[0]! Es fácil como: y Formik guarda el objeto por ti. Puedes hacer lo que quieras con eso. Obtener el nombre, tamaño y tipo? File Entonces, con todos estos datos, puede mostrar la imagen en una pequeña miniatura debajo de la entrada de esta manera: ejemplo de miniatura Consulte el ejemplo de a continuación para ver cómo puede lograr esto fácilmente. Para la generación de miniaturas fui realmente simple. No hay necesidad de cosas sofisticadas para propósitos de demostración. CodeSandbox.io carga de un archivo con ejemplo de miniatura Subiendo varios archivos 📎 📎 📎 Hemos visto la carga de un solo archivo, pero ¿qué hay de varios archivos? ¿Y una zona de caída? ¿Y las miniaturas de esos archivos? Voy a usar la excelente lib de para manejar todos esos detalles de dropzone. También voy a reutilizar el componente Miniatura del ejemplo anterior para simplificar las cosas. react-dropzone este sera el resultado final 3 archivos subidos Formik facilita el manejo de cosas como esta. es todo lo que necesita. Básicamente, puede realizar un seguimiento de una serie de archivos y hacer todo lo que necesita. setFieldValue ¡Siéntase libre de jugar con el ejemplo de CodeSandbox.io a continuación! Ejemplo de carga de varios archivos Soporte de reCaptcha 🔐 Apuesto a que casi todos han interactuado con alguna forma de r en el pasado. Tal vez incluso hoy llenaste un formulario y marcaste esa casilla o jugaste ese pequeño juego para demostrar que no eres un bot. El punto es que los reCaptchas son bastante comunes cuando las personas quieren evitar que los bots les envíen basura mediante el envío continuo de sus formularios. Google eCaptcha Déjame mostrarte cómo puedes manejar un simple recaptcha en tu formulario. Para el ejemplo, usaré el paquete para obtener la conexión api. react-recaptcha He usado una clave que solo uso con fines de demostración. Si por alguna razón se cae en el momento de leer esto, siéntase libre de ingresar el suyo propio y probarlo. Ejemplo de Google reCaptcha v2 ¡¿Qué?! 😅 ¿Esperabas más trabajo? Recuerda el gol de Formiks fue crear un ayudante de formulario escalable y de alto rendimiento con una API mínima que hace las cosas realmente molestas y deja el resto en tus manos. Bueno, podemos simplemente controlarlo nosotros mismos con la función y manejarlo en valores. ¡Más tarde, lo enviaría al servidor y realizaría la validación del lado del servidor en la respuesta reCaptcha dada! setFieldValue ¡Todos juntos! 💯 ¡Excelente! Ha llegado hasta aquí y ahora quiere saber cómo aplicará esto en un escenario real y enviará los datos al servidor. ¡Déjame ayudar! Construyamos un formulario para un usuario que tiene un y el formulario debe enviarse mediante la validación de un reCaptcha. nombre, correo electrónico, foto, algunos archivos adjuntos Al final vamos a ver cómo debemos enviar las cosas al servidor para que acepte los archivos y el modelo de usuario. el aspecto final de la forma Como puede ver en continuación, el formulario solo se envía cuando se verifica el recaptcha y se completan todos nuestros campos obligatorios. Siéntete libre de jugar con él. CodeSandbox.io a el ejemplo completo Formik ya maneja el y el de forma gratuita para nosotros. Así que solo tenemos que conectar los otros campos. Es tan simple como crees. nombre correo electrónico valores iniciales, esquema de validación y código de envío Para obtener esos archivos en el servidor, debe enviarlos a través de . Elegí la forma simple porque funciona con fines de demostración y debo mantenerlo tan simple y claro para usted. FormData ¡Estoy sugiriendo pero puedes usar lo que quieras! async/await const res = await fetch(“la url de su publicación”, {método: “POST”, cuerpo: formData }); Y el resto depende de la pila de su servidor. NOTA: Es posible que la pieza de código a continuación tenga que diferir dependiendo de su pila de back-end. for (sea i = 0; i <= valores.archivos adjuntos.longitud; i++) { formData.append(`archivos adjuntos[${i}]`, valores.archivos adjuntos[i]); } Algunos retos para ti 🎲 En este punto, es posible que se pregunte por qué no he realizado algunas funciones básicas, como borrar el archivo cargado, borrar archivos cargados individuales (del ejemplo de carga múltiple) o tal vez incluso borrar y restablecer el reCaptcha. Bueno, ¡ese es desafío! 😏 😄 TU ¡Para repasar esas habilidades, siéntase libre de bifurcar CodeSandboxes y piratear! Puedes probar Haciendo un componente de Miniatura más inteligente (react-dropzone en realidad nos da un blob de vista previa, ¿así que tal vez lo usemos? 😄) Eliminar un archivo de la entrada de carga única Eliminando un (algunos) archivo (s) de la entrada de carga múltiple Restablecer el reCaptcha Simplificar el código adjunto de FormData Haz que un envío real suceda a alguna API ¡Diviértete codificando! 💻 🎲
