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
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
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.
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:
(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?
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?
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
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?
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:
Hope this helps!
1 Like
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
