Netlify form does not send file attachment with Gatsbyjs

Hi,

I have a website built with Gatsbyjs that uses Netlify Forms to collect signups. I noticed the input type “file” attachment does not get picked up by Netlify for some reason. After multiple tests, I found out if I directly open up the page URL that contains the form, it all works fine, however, if I navigate to the form page from another page, it won’t work.

here’s the site: https://tng.netlify.app/
and here’s the URL that contains the form: Job | TNG Montessori Academy

I wonder if anyone got a fix for it?

Hey @Larry_Cheng,

Looks like you’ve deleted all the form submissions, so it’s hard for us to debug. Could you submit something again and not delete it this time?

Hi @hrishikesh ,

Thanks for the reply. I just had two submissions: one of them was done directly opening the URL that contains the form, the other one was done after browsing some pages and then navigating to the page that contains the form.

The results: the first one worked, the second one didn’t.

Hi,

Are you able to find out the cause of the problem? I have a feeling it has something to do with the site being a static generated site, but not sure if that’s the case.

I’m thinking of rebuilding the form component with AJAX, maybe that will help

I think this is a problem with how Gatsby is working and not with Netlify. When you change pages using client-side JS, Gatsby uses the form markup that you’ve added in your source code and doesn’t take into consideration the static HTML markup changed by Netlify. This causes the forms to not work on client-side changes.

I’d advise adding a static version of the form somewhere in the site, so Netlify can process those and accept submission from anywhere in the site as long as the form name remains the same.

Thank you, I’m going to modify the code and see if it works

For anyone who stumbles upon this issue by chance (doesn’t matter if you are using Gatsby or Nextjs, or another react-based SSG framework) here’s how I fixed the issue:

The main problem is that some people, myself included, got too used to writing JSX and forgot that JSX !== HTML! In order for everything to function properly, we have to handle the form submission in the “react” way as shown in this example

Please note that you can not test the form in the dev environment because the form is only created at build time (for Gatsbyjs). deploy to Netlify and use the preview mode to watch the magic happen.

Happy coding!

1 Like

Hey there, @Larry_Cheng :wave:

Thanks so much for coming back and sharing this with us! This will definitely be beneficial for future Forums members who encounter something similar. :netliconfetti: