Home
Support Forums

Unable to submit file using javascript

This is my html code

<form name="resumeForm" id="resumeForm" method="POST" data-netlify="true">
  <input type="file" name="resumeFileInput" accept="application/pdf" />
</form>

This is my Javascript code on form submit

const resumeForm = document.getElementById('resumeForm')
const formData = new FormData(resumeForm)
formData.append('resume', file)
fetch('/', {
  method: 'POST',
  body: formData
})
  .then(() => {
    alert('Resume successfully submitted!')
  })
  .catch(console.error)

The problem is that form is submitting but on backend on netlify, there is no file in submission

Hi @Ekansh_Jain_MES

Are you using plain JavaScript, React, Vue, Nuxt, other? Have you seen the File Upload documentation?

I am using plain JavaScript and yes I have seen the documentation

Here’s a working form extended from the form in the documentation.

<form name="resumeForm" method="POST" data-netlify="true" id="resumeForm">
  <p><label>Your Name:<br><input type="text" name="name" /></label></p>
  <p><label>Your Email:<br><input type="email" name="email" /></label></p>
  <p><label>Message:<br><textarea name="message"></textarea></label></p>
  <p><label>Resume:<br><input type="file" name="resume" accept=".pdf" /></label></p>
  <p><button id="sndbtn" type="submit">Send</button></p>
</form>

with

<script>
  document.querySelector("form").addEventListener("submit", handleSubmit);

  const handleSubmit = (e) => {
    e.preventDefault()
    
    let myForm = document.getElementById('resumeForm');
    let formData = new FormData(myForm)

    fetch('/', {
      method: 'POST',
      headers: {
        "Content-Type": "multipart/form-data"
      },
      body: new URLSearchParams(formData).toString()
    }).then(
      () => console.log('Form successfully submitted')
    ).catch(
      (error) => alert(error)
    )
  }
</script>