Why not work file upload in the netlify forms Next js app?

Support
, ,
1

Can someone help me? My problem is that in the Next js application the form sends the data from the field name (input type=‘text’), and from the field file (input type=‘file’), but in netlify-foms I get only name, field file - nothing comes. That is, the file from FormData is not loaded on netlify-forms. What am I doing wrong? How can I solve this problem?
Here is the Next js app link: https://drag-and-dropzone.netlify.app/
This is the application code: GitHub - dmytro-petrenko/sample-dropzone

2

Hey @Dima,

It seems you’re submitting the form with application/x-www-form-urlencoded as opposed to multipart-form/data that’s suggested here: Forms setup | Netlify Docs

3

Hi @hrishikesh
I already use it. Please see the code of my application which I have provided above. I have used encType=“multipart-form/data” as well as encType=“multipart/form-data”. Since the last option is also found in the documentation, and I do not know which one is correct.
To be honest, what you wrote does not affect what I send to FormData at all. Either way, the text is always sent. I used all possible options from the documentation:

  • form without AJAX;
  • form with AJAX;
  • form with build command: “next build && next export” in package.json. To do this, I configured in netlify:
    Site settings => Build & deploy => Environment => NETLIFY_NEXT_PLUGIN_SKIP : true
    Site settings => Build & deploy => Build settings => Publish directory: out
    But all this does not work in Next js. I can’t upload a file to netlify-forms.
5

Hey @Dima,

I was able to send a file correctly without using your Next.js setup. I triggered a file submission using Postman by sending a POST request to my site (a fork of your repo) along with the file and I got it fine here:

image
image1510×364 27.1 KB

(I had not sent the Name field).

This makes me think that there’s something weird going on when you add JavaScript to your form submission. For example, I tried disabling JS to see if it’s still working, but it looks like I can’t even attach a file anymore. So I couldn’t test it. But something could be going wrong in that area. Could you try if a plain simple HTML based form works with your Next.js setup?

6

I tried your option. I was able to get the file through a simple input type=‘file’. Thanks.
But I have a project and it uses the react-dropzone plugin. I need that the form works with this plugin.
There is an example on the netlify forum and this plugin (react-dropzone) works with React js app like mine.
Sample app from your forum: GitHub - futuregerald/react-netlify-form-file
I uploaded this app in netlify forms: https://react-netlify-form-file.netlify.app
I got the file in netlify forms with this React js app. The same react-dropzone plugin is used here. Why doesn’t the same code work in Next js?

8

Hello @Dima

I forked your repository and experimented a bit on my own. It seems that the issue is here:

  useEffect(() => {
    // setFile(docFile[0]);
    if (docFile.length > 0) {
      let fileDoc = docFile[0].path;
      setFile(fileDoc)
    } else {
      setFile('')
    }
  }, [docFile]);

On your UploadDropZone component you are assigning the “path” of the docFile array element whereas you should be assigning the whole element for it to be passed on setFile. Just remove the .path:

let fileDoc = docFile[0];

Also, restore the old encoding function you had before:

  const encode = (data) => {
    // console.log('data: ', data)
    const formData = new FormData();
    Object.keys(data).forEach((k) => {
      formData.append(k, data[k]);
    });
    return formData;
  };

To follow futuregerald’s example. This should be enough to fix the issue.

Hope this helps!

2 Likes
9

Hi @gualter
Thanks for your efforts in helping with this issue.
Unfortunately, what you wrote about, I already tried it and it does not work on netlify, that’s why I posted this topic.
Now the code that you proposed to fix is ​​what I stopped experimenting on.
The problem is that when processing form data using the AJAX method, only the text is sent, and the file is not sent. At the same time, in Next JS, I used next export and this does not work either.
When I use non-Ajax form submission (according to Netlify documentation) with vanilla input type=“file” it works. But I don’t need this approach for my project.
Can you help me?

10

Hi @Dima

Can you take a look at my forked version of your repo which contains the changes I mentioned before?

That version parses both file name and link:

image
image1766×556 42.1 KB

Hope this helps!

1 Like
11

Hi @gualter
Strange, I tried this method before contacting this forum and it did not work. Anyway, thanks for your help and your time! It helped me in my project with this piece of code, but the project is more complicated: it uses formik libriary.

1 Like
12

Glad to know you are on the right track now, @Dima. Happy building :rocket: