My form: DM’ed
website is built with nuxt.js. Sometimes I receive files normally and other times I receive no files at all. I tested many times but this just happens randomly. What could be the issue there?
btw I have validation on so users won’t be able to submit the form without the file(s)
Hi Shadi, how big are the files that people are generally trying to upload? there are size limits, so this can be a factor.
I thought so but I tried different file sizes ranging from 1kB to 1MB and sometimes the file uploads and sometimes not. in my form I can see the file name and all and it takes sometime after I click submit to upload the files but still I don’t always see the file link in netlify’s forms admin interface.
Hey @Shadi,
Thanks for your patience on this. We have a few followup questions:
I see that you have two forms on the page you link: “admission-form” and “admissions-form”- are you not getting file submissions to both? Or just one?
I’m also wondering if you have tested different file types, in addition to sizes. For example, one submission includes attachments that add up to 3MB. They are all jpegs. Another submission has a PDF of about 250kb. So those both seem to be working okay. Are you perhaps trying to attach another file type that is not getting through?
If you could share a specific submission you’ve been testing, we could check out our internal logs for errors for that file. You can just drop in the link when you click the submission in the UI. It’ll be in the format:
Hey @Shadi,
We’ve done some testing on our end and have not been able to replicate what you’re seeing. When we submit large files to our form backend, we are seeing the submissions in our database, including link to file.
We also looked at our logs for the submission you messaged about: p********1****@gmail.com on June 4. That POST request did not contain any file data, so it seems like your end user did not attach a file to that submission. We did notice that the document field of your form is not required, so it’s possible that users are able to submit forms without the documents that you’d like.
We’d suggest making that field required. Please let us know if you continue to run into the issue after that!
I am having the same issue. I have tried it with files that are tiny and large but its just random when they work and dont work
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.”
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.
It’s never a bother if you’re having an issue 
- Glad it’s working, although I wouldn’t be happy if i didn’t know why it was working 
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:
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 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 ?