Search code examples
javascriptreactjsaxiosform-data

form-data | axios: Unable to get headers from FormData, Error: getHeaders is not a function

I am trying to post text and file fields using form-data and axios, but I am getting an error: getHeaders() is not a function. Below is my submit code, note that I am using React with Typescript.

import * as FormData from 'form-data'
import axios from 'axios'

submit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault()

  const { title, description, pictureFile } = this.state

  let data = new FormData()
  data.append('title', title)
  data.append('description', description)
  data.append('picture', pictureFile)

  axios.post('/api/route', data, {
    headers: data.getHeaders() // ERROR: getHeaders is not a function
  })
    .then(res => handle(res))
    .catch(err => handle(err))
}

The particular header I am interested in is the Authorization, I can set it manually, but then the boundaries are required so ... I better try to get that getHeaders() function to work.

I don't get the problem here, getHeaders seems to be part of form-data API.

Please help.

Solution

  • form-data is used only on Node, if you run it on the browser, it will switch to the window's version of FormData. I saw this in their code.

    module.exports = typeof self == 'object' ? self.FormData : window.FormData;