I'm not receiving the file uploaded in the form

[Paloma]

Hello
I am able to receive everything from the form except the attachment that the user uploads.

My website:

paladria.netlify.app

My code:

          <form class="b-contact-page__input" enctype="multipart/form-data" data-netlify="true" method="POST" name="quote" action="/#contact">
            <div>
              <input name="name" type="text" id="name" required placeholder="{{ .form_settings.name_placeholder }}">
            </div>
            <div>
              <input name="email" type="email" id="email" required placeholder="{{ .form_settings.email_placeholder }}">
            </div>
            <div>
              <input name="file" type="file" id="file">
            </div>
            <div>
              <textarea class="data-hj-allow" name="message" id="message" rows="6" required placeholder="{{ .form_settings.message_placeholder }}"></textarea>
            </div>
            <button type="submit" onclick="location.href='#popup1'" class="b-contact-page__submit">{{ .form_settings.button_text }}</button>
          </form>

[clarnx]

Hi @Paloma, thanks for posting.

@Paloma

My code:

The code you pasted as your form code above and the form code on the deployed website is not the same when I inspected the form using Chrome Dev Tools.

However make sure you are deploying the form code above and then set the action attribute of the form to the value "/contact"

action="/contact"

You site also has the error below in the console.

Uncaught TypeError: Cannot read properties of null (reading ‘getElementsByTagName’)
at window.onload

Kindly fix that
Make the suggested edits and then redeploy and let me know the outcome.
Thanks.

[Paloma]

The code is the same, I don’t know what you’re seeing different…

I fixed the other errors you mentioned and I am still not receiving the files attached…

[clarnx]

Hi @Paloma, kindly check the screenshot of your form code below.

@Paloma

The code is the same, I don’t know what you’re seeing different…

The container of your input has the style attribute where display has been set to none.
It’s not the same as the code you pasted originally.

The error also still persists. Open your Chrome Dev Tools console to see the error.

[Paloma]

I’ve hid it so the users don’t see it as it doesn’t work. To test it, I remove the display none. It won’t affect on not receiving the files.
Please, it has to be something else…

[kylesloper]

Hi @Paloma
It looks like you don’t have a data-netlify="true" attribute in your form element. Please add this and redeploy to see if the issue is resolved.
Learn more about Netlify forms here:

Forms setup

[Paloma]

I do have that in my form already, please take another look

[clarnx]

Hello @Paloma, if you take a look at the image I shared you will realize that what @kylesloper stated is true. Your form does not have data-netlify="true" attribute.
Kindly make sure your deploys are being published to production.

[kylesloper]

We saw a similar case to this the other week. It appeared that Netlify was stripping the attribute on build. Eventually we realized that OP was deploying from a different codebase to what they were editing.

@Paloma can you confirm this? If you are using a git repo please ensure Netlify is deploying the correct branch and you have pushed all your local commits.

Thanks.

[luke]

Hi, @Paloma. I see the backend handler created to receive the file field data.

I believe I’ve found the reason and it is covered in this support guide:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

Quoting the relevant section below:

8. Make sure that you POST your form request (not GET) with a Content-Type of application/x-www-form-urlencoded in most cases. However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.

In my testing, the form is using content-type: application/x-www-form-urlencoded for the submission. This is why the files are missing. Would you please change this to use content-type: application/x-www-form-urlencoded instead?

If that doesn’t resolve the missing uploaded file issue (or if there are other questions), please let us know.

[Paloma]

Yes, everything is deploying correctly. I don’t know why it isn’t showing in the inspector, but everything else I deploy appears correctly

[Paloma]

@luke

application/x-www-form-urlencoded

I received your email and no file showed.
I also tried this as you said:

enctype="application/x-www-form-urlencoded"

And it hasn’t worked either… it is what you meant right? maybe I didn’t understand correctly

[amelia]

@Paloma It seems like you still have the incorrect content type on your form. Luke mentioned that you need to set the content type to multipart/form-data as outlined below:

@luke

However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.

Can you also confirm if you are using an HTTP POST request to submit the form?

[Paloma]

No, he said:

@luke

In my testing, the form is using content-type: application/x-www-form-urlencoded for the submission. This is why the files are missing. Would you please change this to use content-type: application/x-www-form-urlencoded instead?

I originally had " multipart/form-data and then changed it. Neither of them work!
And yes, it is using POST.

[fool]

OK. Could you please change back to multipart/form-data so we can test it in the correct configuration for receiving files?

Thanks!

[Paloma]

I did it yesterday, yes. Please check again

[hrishikesh]

Hi @Paloma,

You’re using JavaScript to submit the form and that’s where you’ve got the configuration incorrect:

[Paloma]

Thank youuu! this finally worked, when I removed the JS. That code was my confirmation page, since I didn’t manage to create it another way. But it’s fine. Thanks again.

[navsubrm]

So, this may be unrelated in a way, but I just went through a file not being passed through issue and resolved it by removing content type from my fetch. I get the form from the page and validate it on the server, then do a POST fetch to a hidden static route with the form for Netlify. I found that you should not use a content type encoding in fetch POSTs for multipart/form-data. The link below discusses.

Uploading files using 'fetch' and 'FormData'