I have a static website built with Gatsby and there is a contact form including file upload. Cause I don't want to setup a back-end, I choose FormSubmit.co service to handle sending email on every form submissions.

It worked fine uploading file and I received the file in my email just when I used the method: adding the endpoint to the form action action="https://formsubmit.co/my@email.com", As described in DOCS .
But that method redirects page to another; so because I don't want the page to be redirected and wanna show my own message, I decided to use the AJAX method.

This is my code getting Name and File from user, and the handleSubmit function:

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>
 );
};

The problem is while using AJAX form, the file wouldn't upload and I don't receive it in my email. But there is no error msg and even I think the file has been sent! according to the POST request at network:

I've also tried Axios library, but it didn't work either.