Gatsby send file from form data to getform.io with axios

Question

I can post name and emails to my getform.io form fine. But the file just shows up as [] and the files tab is empty. I see in the network tab my request payload is {email: "test@gmail.com", file: {}, name: "test"}

Any help is appreciated, thank you!

import React, { useState } from "react"
import { Button, Form } from "react-bootstrap"
import axios from "axios"

const SingleJobForm = ({ jobTitle, jobEmployer }) => {
  const [email, setEmail] = useState(null)
  const [name, setName] = useState(null)
  const [file, setFile] = useState(null)

  const handleSubmit = e => {
    e.preventDefault()
    let formData = { email, name, file }
    axios({
      method: "POST",
      url: "https://getform.io/f/5e110b76-25c7-4a13-9464-e53d2493f446",
      data: formData,
      header: {
        "Content-Type": "multipart/form-data; boundary=${form._boundary}",
      },
    })
  }

  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="formName">
        <Form.Label>Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="First Last Name"
          onChange={e => {
            setName(e.target.value)
          }}
        />
      </Form.Group>
      <Form.Group controlId="formEmail">
        <Form.Label>Email address</Form.Label>
        <Form.Control
          type="email"
          placeholder="Enter email"
          value={email || ""}
          onChange={e => setEmail(e.target.value)}
        />
      </Form.Group>
      <Form.Group onChange={e => setFile(e.target.files[0])}>
        <Form.File id="resume" label="Resume" />
      </Form.Group>
      <Form.Group controlId="formCheckbox">
        <Form.Check type="checkbox" label="I confirm I am 18 years or older" />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </Form>
  )
}

export default SingleJobForm

Answer 1

The solution from this stack overflow post worked I had to use FormData interface.