Formik — Manejo de archivos y reCaptcha

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 Github o estas publicaciones:

• La alegría de las formas con React y Formik
• Mejores formularios React con Formik
• Painless React Forms con Formik (escrito por mí)

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 archivo) y configurar onChange para usar la función setFieldValue de Formiks. ¡Recuerde que podemos acceder fácilmente al archivo cargado usando event.currentTarget.files[0]!

Es fácil como:

y Formik guarda el objeto File por ti. Puedes hacer lo que quieras con eso. Obtener el nombre, tamaño y tipo?

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 CodeSandbox.io 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.

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 react-dropzone para manejar todos esos detalles de dropzone. También voy a reutilizar el componente Miniatura del ejemplo anterior para simplificar las cosas.

este sera el resultado final

3 archivos subidos

Formik facilita el manejo de cosas como esta. setFieldValue es todo lo que necesita. Básicamente, puede realizar un seguimiento de una serie de archivos y hacer todo lo que necesita. ¡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 Google r eCaptcha 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.

Déjame mostrarte cómo puedes manejar un simple recaptcha en tu formulario. Para el ejemplo, usaré el paquete react-recaptcha para obtener la conexión api.

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 setFieldValue 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!

¡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 nombre, correo electrónico, foto, algunos archivos adjuntos y el formulario debe enviarse mediante la validación de un reCaptcha.

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 CodeSandbox.io a 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.

el ejemplo completo

Formik ya maneja el nombre y el correo electrónico de forma gratuita para nosotros. Así que solo tenemos que conectar los otros campos. Es tan simple como crees.

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 FormData . Elegí la forma simple porque funciona con fines de demostración y debo mantenerlo tan simple y claro para usted.

¡Estoy sugiriendo async/await pero puedes usar lo que quieras!

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 TU desafío! 😏 😄

¡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! 💻 🎲