Next.js ajax forms file not uploading

Support
1

Hello,

I’m trying to upload a file using Netlify forms via AJAX.

The form gets processed and submitted correctly except the file field is empty in the dashboard.

I noticed that encoding a file to URL search params string returns just %5Bobject+File%5D. Is that correct?

Here’s my code: Netlify forms file upload via ajax issue · GitHub

It’s a simple Next.js app. Am I making some dumb mistake or encoding a file into a URL string is incorrect in the docs?

Thanks

2

Hiya, @tmvst :wave:

Welcome to the Netlify Forums :netliconfetti: Sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide the information we request at the bottom of the Support Guide. :slight_smile:

3

Hello Hillary,

Thanks for the response. I spent a few hours on this already, searched the whole internet, tried a bunch of examples. The code I shared in my original post is the closest I got to a working solution.

  1. The URL for your live form as you want visitors to use it
    NER System — Otevřené pracovní pozice
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
    NER System — Otevřené pracovní pozice
    Code: Netlify forms file upload via ajax issue · GitHub
  3. The form name that you’ve set and that shows in our UI
    careers-contact
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
    The form submits successfully (200 OK)
  5. Description of anything you have tried that did or didn’t help or make things better/worse
    I tried the official docs example for AJAX file upload form (Forms setup | Netlify Docs) which you can see in my code snipped in the original post. That results in the form submitting correctly except I don’t see the file in the Netlify Forms admin UI.
    Then I tried to modify the URL encoding or removing it altogether (submitting just FormData), but that resulted in errors. I don’t understand how a file (a PDF for example) can be encoded intoto URL params, though.
4

Can somebody point me in the right direction please? I still can’t figure this out.

5

Hey there, @tmvst

I just wanted to let you know we have not forgotten about this thread! Our hands have been full this past week, but we should have more information for you soon.

Thank you for your patience.

1 Like
6

hi there @tmvst , would you mind looking through the issues here of filing a new one if there isn’t anything that covers your use case please?

7

Hi @tmvst.
Were you able to find a solution?
I am actually stuck in the same issue.

8

Hi @nitindutta2401,

Do you have an example we can take a look at?

9

https://answers.netlify.com/t/file-not-showing-on-the-netlify-dashboard-on-form-submission-i-am-getting-the-data-from-the-rest-of-the-fields-but-not-from-the-file-type/43453/14

I have mentioned my repo over here. You can have a look. It’ll be great if you can help out.

10

For any folks following along, we continued the conversation in the thread linked above! I am closing this current thread due to inactivity.