My form doesn't always send files!

hi @krichey15, sorry to hear you are struggling. Could you tell us some more information? Which site is this regarding? Can we see a copy of your html code?

Sorry for the late reply I thought I had fixed the issue but it still a problem.

website is:
https://hungry-beaver-b27a84.netlify.app/

<FormContainer>
            <form name="contact" method="POST" enctype="multipart/form-data" data-netlify="true">
                <input type="hidden" name="form-name" value="contact" />

                <label htmlFor="name">Name: </label>
                <FormInput type="text" id="name" name="name" required />

                <label htmlFor="company">Company(if applicable): </label>
                <FormInput type="text" id="company" name="company" />

                <label htmlFor="email">Email: </label>
                <FormInput type="email" id="email" name="email" required />

                <label htmlFor="phone">Phone: </label>
                <FormInput type="tel" id="phone" name="phone" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />

                <label htmlFor="date">Date Needed:</label>
                <FormInput type="date" id="date" name="date" required />
                <p><small>Not the day of the event - usually 1 or 2 days before.  What day do you need to be holding your cookies?</small></p>

                <label htmlFor="cookie-count">How many cookies would you like to order?</label>
                <FormInput type="number" id="cookie-count" name="cookie-count" min="12" max="100000" placeholder="12" required />
                <p><small>Min is 1 dozen but you can order 17 cookies if that is how many you need.</small></p>

                <label htmlFor="mini-cookies">Would you like to add 1 dozen mini-cookies?</label>
                <CustomSelect id="mini-cookies" name="mini-cookies">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="cake-topper">Would you like to add on a cake topper?</label>
                <CustomSelect id="cake-topper" name="cake-topper">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="individual">Do you need your cookies individually wrapped with a bow?</label>
                <CustomSelect id="individual" name="individual">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="design">What type of design are you interested in?</label>
                <CustomText id="design" name="design" rows="4" required />
                <p><small>Give me all the details!  What shape of cookies, colors, vibe, style, a name, specific animal, year etc.?</small></p>

                <label htmlFor="event">Are these cookies for an event?</label>
                <CustomSelect id="event" name="event">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="event-name">What is the event?</label>
                <FormInput type="text" id="event-name" name="event-name" />

                <label htmlFor="pick-up">Are you able to pick-up your order in Sequim, WA?</label>
                <CustomSelect id="pick-up" name="pick-up" required>
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>

                <label htmlFor="washington">If "No" and you need cookies shipped, are you located in Washington state?</label>
                <CustomSelect id="washington" name="washington">
                    <option selected disabled value=""> -Y or N-</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </CustomSelect>
                <p><small>I am only able to ship within the state of Washington.</small></p>


                <label htmlFor="photos">Add any inspirational photos here:</label>
                <FormInput type="file" id="photos" name="photos" placeholder="Upload Photo" />
                <FormInput type="file" id="photos2" name="photos2" placeholder="Upload Photo" />
                <FormInput type="file" id="photos3" name="photos3" placeholder="Upload Photo" />
                <br />

                <FormButton type="submit">Bake</FormButton>

            </form>

        </FormContainer>

hi there, can you share your actual html code with us? this isn’t native html. thanks!

This is HTML code in react using “styled Components” So if you see <FormInput that is just a custom <input element and by “custom” I mean custom css.

Do you still have the issue if you use a default input element? You could also limit the file types with accept="image/png, image/jpeg" if you know those types work consistently and also prevent people from uploading videos to and images section etc. (Or even an executable file oof).

Also out of curiousity, if you only ever upload to your first file input, does it work? Then if you upload to the second / third does that cause issues or if you only use the first does it still have issues not using multiple files etc?

Also remember “The name is sent along with the value in the submission and our API will only record data from form submissions with names matching the definition as parsed at deploy time.”

1 Like

Great suggestions! Yes total oversight on my part not to include an accept attribute.

As for when it works I have tested just 1 image on all 3 inputs and tested all 3 at once and it seems to be working consistently now. Lol I am sorry to bother you with what seems to be now a non-issue. thanks for getting back to me though.

1 Like

It’s never a bother if you’re having an issue :slight_smile: - Glad it’s working, although I wouldn’t be happy if i didn’t know why it was working :sweat_smile:

Have a good day!

Hi… I’m having the same problem. No matter what I change, I don’t receive a file either through my email notifications or in Netlify account. Here’s a sample of my code:

html:

 <form class="row g-4" method="POST" data-netlify="true" id="jobApply">
              <div class="mb-5">
                <h class="h1">Submit your application</h2>
              </div>
              <div class="row mb-3">
                <label for="resumeCVCareersForm" class="col-sm-4 col-form-label">Resume/CV</label>
                <div class="col-sm-8">
                  <input name="file" type="file" class="form-control" id="resumeCVCareersForm" required>
                </div>
              </div>
              <div class="row mb-3">
                <label for="fullNameCareersForm" class="col-sm-4 col-form-label">Full name</label>
                <div class="col-sm-8">
                  <input name="name" type="text" class="form-control" id="fullNameCareersForm" placeholder="Your full name" aria-label="Your full name" required>
                </div>
              </div>
              <div class="row mb-3">
                <label for="emailCareersForm" class="col-sm-4 col-form-label">Email</label>
                <div class="col-sm-8">
                  <input name="email" type="email" class="form-control" id="emailCareersForm" placeholder="Your email address" aria-label="Your email address" required>
                </div>
              </div>
              <div class="row mb-3">
                <label for="phoneCareersForm" class="col-sm-4 col-form-label">Phone</label>
                <div class="col-sm-8">
                  <input name="phone-number" type="tel" class="form-control" id="phoneCareersForm" placeholder="+x(xxx)xxx-xx-xx" aria-label="+x(xxx)xxx-xx-xx" required>
                </div>
              </div>

              <hr class="mt-5 mb-3">

              <div class="mb-5">
                <h4>Links you would like to share (optional)</h4>
              </div>
              <div class="row mb-3">
                <label for="linkedinURLCareersForm" class="col-sm-4 col-form-label">LinkedIn URL</label>
                <div class="col-sm-8">
                  <input name="linkedin_link" type="text" class="form-control" id="linkedinURLCareersForm" placeholder="www.linkedin.com/username" aria-label="www.linkedin.com/username">
                </div>
              </div>
              <div class="row mb-3">
                <label for="githubURLCareersForm" class="col-sm-4 col-form-label">GitHub URL</label>
                <div class="col-sm-8">
                  <input name="github_link" type="text" class="form-control" id="githubURLCareersForm" placeholder="www.github.com/username" aria-label="www.github.com/username">
                </div>
              </div>
              <div class="row mb-3">
                <label for="portfolioURLCareersForm" class="col-sm-4 col-form-label">Portfolio URL</label>
                <div class="col-sm-8">
                  <input name="portfolio_link" type="text" class="form-control" id="portfolioURLCareersForm" placeholder="www.mysite.com" aria-label="www.mysite.com">
                </div>
              </div>

              <hr class="mt-5 mb-3">

              <div class="mb-2">
                <h4>Additional information (optional)</h4>
              </div>

              <div class="mb-3">
                <label for="additionalInfoCareersForm" class="form-label visually-hidden">Additional information (optional)</label>
                <textarea name="additional_info" class="form-control" id="additionalInfoCareersForm" placeholder="Add a cover letter or anything else you want to share." aria-label="Add a cover letter or anything else you want to share." rows="5"></textarea>
              </div>
              <div class="mb-3">
                <div data-netlify-recaptcha="true"></div>
              </div>
              <div class="d-grid text-center mt-7">
                <button type="submit" class="btn btn-primary btn-lg">Submit application</button>
                <div class="result"></div>
              </div>
            </form>
      {# application form ends #}
    </div>

<script>
    let formElem = document.getElementById('jobApply');
    if (formElem) {
        const handleSubmit = (e) => {
        e.preventDefault()
        let formData = new FormData(formElem)
        fetch("/", {
          method: 'POST',
          headers: { "Content-Type": "multipart/form-data" },
          body: new URLSearchParams(formData).toString()
        }).then(() => document.getElementById('success').style.display = "flex").catch((error) =>
          alert(error))
      }
      formElem.addEventListener("submit", handleSubmit)
    }
</script>

I had to rejig a bit the javascript as the one you guys provide in the documentation either throw errors or it’s not working.

I would very much appreciate the help! Many thanks in advance!

Ivan.

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

If you are still having problems, please provide the following information:

  1. The URL for your live form as you want visitors to use it
  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 ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse

Hi Hillary,

Thanks for you reply.

The url where I have the form is this one: DevOps/SRE engineer - Aerlytix

I’ve read those resources, but don’t seem to highlight the problem I’m seeing and I think I’m doing all the proper things for the looks of it.

On your point 5. I have tried your sample code here from Forms setup | Netlify Docs but it didn’t work:

document.forms.fileForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const result = document.querySelector(".result");
  fetch("/", {
    body: new FormData(event.target),
    headers: { "Content-Type": "multipart/form-data" },
    method: "POST",
  })
    .then(() => {
      result.innerHTML = "Success";
    })
    .catch((error) => {
      result.innerHTML = `Failed: ${error}`;
    });
});

… and I modified the code to this, which works perfectly fine. The only thing is not working uploading the file:

let formElem = document.getElementById('jobApply');
    if (formElem) {
        const handleSubmit = (e) => {
        e.preventDefault()
        let formData = new FormData(formElem)
        fetch("/", {
          method: 'POST',
          headers: { "Content-Type": "multipart/form-data" },
          body: new URLSearchParams(formData).toString()
        }).then(() => document.getElementById('success').style.display = "flex").catch((error) =>
          alert(error))
      }
      formElem.addEventListener("submit", handleSubmit)
    }

Hopefully the source code and paint a better picture?

Thanks again your help!

Hi @iFrantar

The first code should work if you remove the headers line.

Hi hrishikesh!

I don’t think is properly working. Neither my code or your sample code by removing the headers.

Thanks for the help.

Just a quick thought. Should the tags have any particular criteria for sending forms ?

can you explain this in a different way, @Frantar? what do you mean exactly by different criteria for tags?

Sorry… what I meant is if the <meta> tags in the header needed to have as well some specific information for a page that container a <form>

Unfortunately, nothing of the suggested fixes is solving my problem. I honestly don’t know what I’m doing wrong :confused:

Hi @iFrantar

I have tinkered with the Submit file uploads with AJAX code on and off for a while because I could never get it to work. And it annoyed me that i couldn’t (sometimes I just can’t let things go!)

After having a serious argument with NuxtJS, then Vue.js, then with NuxtJS again (and winning them all), I decided to pick a fight with Vanilla JS again.

In the end I made one modification to the code from the documentation. I removed the headers.

This is the code from the documentation

document.forms.fileForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const result = document.querySelector(".result");
  fetch("/", {
    body: new FormData(event.target),
    headers: { "Content-Type": "multipart/form-data" },
    method: "POST",
  })
    .then(() => {
      result.innerHTML = "Success";
    })
    .catch((error) => {
      result.innerHTML = `Failed: ${error}`;
    });
});

And this is the code I used, which successfully submits a file each time

document.forms.fileForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const result = document.querySelector(".result");
  fetch("/", {
    body: new FormData(event.target),
    // headers: { "Content-Type": "multipart/form-data" },
    method: "POST",
  })
  .then(() => {
    result.innerHTML = "Success";
  })
  .catch((error) => {
    result.innerHTML = `Failed: ${error}`;
  });
});

The only difference is I removed (or rather simply commented out) the headers from the fetch call.

The issue (from what I have found) comes down to have a content-type header like

'content-type': 'multipart/form-data; boundary=----WebKitFormBoundarypE4YBjyZJI201WAY',

when headers are missing to having a content-type header like

'content-type': 'multipart/form-data',

when headers a added. This difference means the multipart data is not decoded because the boundary is missing.

Seems I won the fight with Vanilla JS too! :rofl:

Interesting note, I see this on MDN Using FormData Objects which would explain this behaviour

Hi Coelmay… I have tried commenting out the headers but still not working for me. Neither my modified code nor Netlify’s code.

Anyway, I’m lost as of what could be wrong. Might try a third party platform for forms.

The main difference I see is your code has

let formData = new FormData(formElem)
body: new URLSearchParams(formData).toString()

while the Netlify code (which I have used) has

body: new FormData(event.target),

Yep, it’s strange. Might give it another pass see if I get it to work. Thanks again for your feedback and suggestions :slight_smile:

1 Like

Please give it another pass and let us know what happens! If it doesn’t work, let us know what you tried! If you’re still encountering obstacles after another pass I can loop in our Support Engineers again.