Netlify Forms Formik and NextJS File Upload not showing up

Support
,
1

Help! I’ve been fighting with this all day… I am basically building a apply for a job page and have all the fields working except the resume and the cover letter field. The issue is these are files and whenever I submit my form they show up as blank.

Site: Apply DO&Co. | Local Accounting Firm in Canmore & the Bow Valley

Steps I’ve tried - using formik form, reactstrap form, basic HTML form. various other configurations of the form. I’ve been at it for over 6 hours so I’ve tried a bunch…

Code below:

<Formik
  initialValues={{
    name: '',
    email: '',
    phone: '',
    message: '',
  }}
  onSubmit={(values, actions) => {
    fetch("/", {
      method: "POST",
      body: encode({"form-name": "job-application", ...values})
    })
      .then(() => {
        alert('Success');
        actions.resetForm()
      })
      .catch(() => {
        alert('Error');
      })
  }}
  validate={values => {
    const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
    const errors = {};
    if (!values.name) {
      errors.name = 'Name Required'
    }
    if (!values.email || !emailRegex.test(values.email)) {
      errors.email = 'Valid Email Required'
    }
    if (!values.message) {
      errors.message = 'Message Required'
    }
    if (!values.phone) {
      errors.phone = 'Phone Required'
    }
    return errors;
  }}
>
  {({
      handleChange
    })  => (
    <form
      name="job-application"
      data-netlify="true"
      enctype="multipart/form-data"
      data-netlify-honeypot="bot-field"
      method="POST"
      noValidate
      action={`/`}
    >
      <input type="hidden" name="job-application" value="job-application" />
      <input type="hidden" name="bot-field" onChange={handleChange} />

      <FormGroup >
        <Label htmlFor="name">Name: </Label>
        <Input  type="text" name="name" id="Name"/>
        {/*<ErrorMessage name="name"/>*/}
      </FormGroup>

      <FormGroup>
        <Label htmlFor="email">Email: </Label>
        <Input  type="email" name="email" id="email" />
        {/*<ErrorMessage name="email"/>*/}
      </FormGroup>

      <FormGroup>
        <Label htmlFor="phone">Phone Number: </Label>
        <Input type="phone" name="phone" id="phone" />
        {/*<ErrorMessage name="phone"/>*/}
      </FormGroup>

      <FormGroup>
        <Label htmlFor="coverLetter">Upload Cover Letter: </Label>
        <br/>
        <Input type="file" name="coverLetter" id="coverLetter" />
      </FormGroup>

      <FormGroup>
        <Label htmlFor="resumeUpload">Upload Resume:</Label>
        <br/>
        <Input type="file" name="resumeUpload" id="resumeUpload" />
      </FormGroup>

      <FormGroup>
        <Label htmlFor="message">Message: </Label>
        <Input type="textarea" name="message" id="message" />
      </FormGroup>

      <button className={"btn btn-primary"}
              type="submit">Send
      </button>

    </form>
  )}
</Formik>
2

Hey @kennyG,

Could you simply trying using FormData(form) instead of a custom encode function? Make sure your form has:

  1. An input named form-name with the value as your form’s name
  2. All inputs with names

And that should work.