Currently building a project on Eleventy w/Netlify CMS and Netlify’s Forms.
We are pretty sure we followed all of the known instructions in regards to AJAX requests and even non-AJAX requests and still cannot seem to have file uploads showing in our Form submissions. We will see the rest of the form, but that’s it.
This is our Nunjucks template for the Form
<form id="careerForm" method="post" data-netlify="true" enctype="multipart/form-data">
<div class="subhero-title text-center">{{ item.title }}</div>
<div class="modal-form">
<div class="item">
<label for="firstName">First Name</label>
<div class="box">
<div class="icon my-auto">
<i class="fas fa-user"></i>
</div>
<div class="w-full">
<input type="text" name="firstName" placeholder="First Name*" required />
</div>
</div>
</div>
<div class="item">
<label for="lastName">Last Name</label>
<div class="box">
<div class="icon my-auto">
<i class="fas fa-user"></i>
</div>
<div class="w-full">
<input type="text" name="lastName" placeholder="Last Name*" required />
</div>
</div>
</div>
<div class="item">
<label for="emailAddress">Email Address</label>
<div class="box">
<div class="icon my-auto">
<i class="fas fa-envelope"></i>
</div>
<div class="w-full">
<input type="email" name="emailAddress" placeholder="Email Address*" required />
</div>
</div>
</div>
<div class="item">
<label for="phoneNumber">Phone Number</label>
<div class="box">
<div class="icon my-auto">
<i class="fas fa-phone"></i>
</div>
<div class="w-full">
<input type="tel" name="phoneNumber" placeholder="Phone Number*" required />
</div>
</div>
</div>
<div class="item col-span-full">
<label for="coverLetter">Cover Letter</label>
<div class="box">
<div class="icon pt-1">
<i class="fas fa-file-user"></i>
</div>
<div class="w-full">
<textarea type="text" name="coverLetter" placeholder="Cover letter*" rows="6"></textarea>
</div>
</div>
</div>
<div class="item col-span-full border-t border-b border-navyblue py-3 md:py-4 lg:py-6">
<label for="coverLetter">CV / Resume*</label>
<div class="mt-4 mb-1">
<input type="file" name="resumeFile" required />
</div>
</div>
<div class="col-span-full">
<input type="hidden" name="jobTitle" value="{{ item.title }}" />
<input type="hidden" name="form-name" value="careerForm" />
<button type="submit" class="btn btn-lightblue">Submit Application</button>
</div>
</div>
</form>
And this is our AJAX request that does call when the form is submitted and sends it to Netlify, just without the file themselves.
const handleCareerSubmit = (e) => {
e.preventDefault()
let myForm = e.target;
let formData = new FormData(myForm)
fetch('/', {
method: 'POST',
headers: { "Content-Type": "multipart/form-data" },
body: new URLSearchParams(formData).toString()
}).then(() => {
const getForm = document.querySelectorAll('#careerForm');
const getSuccess = document.querySelectorAll('#careerSuccess');
if (getForm && getSuccess) {
getForm.forEach(element => element.style.display = "none");
getSuccess.forEach(element => element.style.display = "block");
}
}).catch((error) =>
alert(error))
}
Any kind of help is greatly appreciated, thanks!