I'm not receiving the file uploaded in the form

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>

Hi @Paloma, thanks for posting.

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.

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…

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

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.

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…

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:

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

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.

1 Like

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.

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:

Quoting the relevant section below:

  1. 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.

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

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

@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:

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

No, he said:

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

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

Thanks!

I did it yesterday, yes. Please check again

Hi @Paloma,

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

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.