Tengo un sitio web estático creado con Gatsby y hay un formulario de contacto que incluye la carga de archivos. Como no quiero configurar un back-end, elijo el servicio FormSubmit.co para manejar el envío de correo electrónico en cada envío de formulario.

Funcionó bien al cargar el archivo y lo recibí en mi correo electrónico justo cuando usé el método: agregar el punto final al formulario action action="https://formsubmit.co/my@email.com" , como se describe en DOCS .
Pero ese método redirige la página a otra; así que como no quiero que se redirija la página y quiero mostrar mi propio mensaje, decidí usar el método AJAX .

Este es mi código obteniendo Nombre y Archivo del usuario, y la función handleSubmit:

 import React, { useRef } from 'react'; const MyForm = () => { const form = useRef(null); const handleSubmit = (e) => { e.preventDefault(); const data = new FormData(form.current); fetch('https://formsubmit.co/ajax/my@email.com', { method: 'POST', body: data, }) .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.log(error)); }; return ( <form ref={form} method="POST" encType="multipart/form-data" onSubmit={handleSubmit}> <input id="name" name="Name" /> <input type="file" id="file" name="File" /> <button type="submit">Send</button> </form> ); };

El problema es que al usar el formulario AJAX, el archivo no se carga y no lo recibo en mi correo electrónico. ¡Pero no hay ningún mensaje de error e incluso creo que el archivo se ha enviado! de acuerdo con la solicitud POST en la red:

También probé la biblioteca Axios, pero tampoco funcionó.