Netlify Form is Submitting via JS Fetch but file is not uploaded

Support
1

I have a form that I am submitting as a fetch request in Typescript.

function netlifyFormSubmit(data: FormData, testing = false): Promise<Response> {
  if (testing) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(new Response(null, { status: 204 }));
      }, 1000);
    });
  }

  return fetch('/', {
    method: 'POST',
    body: data,
  });
}

The form submission succeeds as a multipart/formdata request. The image is in there as form data.

image
image891×361 19.1 KB

But I didn’t get a link to the file in the “submissions” section of the app.

Any idea what could be going on?

Sorry, I had a bunch of screenshots that I had to remove since I am a new user.

2

What site is this about?

4

I saw this post come in through our Zapier integration last night.

No image came through.

image
image1175×268 27 KB

Did you get any insights from this test?

6

Hi, @hytea. I’ve replied to your support ticket about this as well.

The issue is that there is no static HTML version of the form with the required fields. This is one of the requirements for the form handler to be created.

If you create a static HTML version of the form somewhere and include that HTML file in the publish directory, the form handler will be updated to include all fields defined in that <form> tag and the form submission will work correctly.

If that doesn’t resolve the issue or if there are any other questions, please feel free to reply here or to the support ticket - whichever you prefer.

7

Yes, even though the React JSX form worked to submit the form data, which came from text inputs, to netlify, it didn’t work to submit files, specifically images. When I put the form directly in the index.html file the image was submitted correctly.

8

Awesome thanks for sharing!