File Upload with axios using redux

Question

Currently, I'm able to test a file upload function. and that looks like this

const handleFileUploadSubmit = (event) => {
    event.preventDefault()
    const formData = new FormData()
    formData.append('file', file)
    try {
      const response = axios({
        method: 'post',
        url: `${DOMAIN}/api/v1/shipments/upload_document/${id}/${filename}/`,
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' }
      })
    } catch (error) {
      console.log(error)
    }
  }

This function is working fine but I'm using redux for all other API calls. And I want to move this into similar functions. So I can merge the response into the redux store.

That's how I'm trying.

export const uploadDocument = (id, filename, file) => async (dispatch, getState) => {
  try {
    dispatch({
      type: DOCUMENT_POST_REQUEST
    })
    const formData = new FormData()
    formData.append('file', file)
    const config = {
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    }

    const { data } = await axios.post(`${DOMAIN}/api/v1/shipments/upload_document/${id}/${filename}/`, {}, config)
    dispatch({
      type: DOCUMENT_POST_SUCCESS,
      payload: data
    })

    dispatch({
      type: DOCUMENTS_GET_SUCCESS,
      payload: data
    })
  } catch (error) {
    dispatch({
      type: DOCUMENT_POST_FAIL,
      payload: error.response && error.response.data.detail ? error.response.data.detail : error.message
    })
  }
}

In this function, I get an error

Multipart form parse error - Invalid boundary in multipart: None

So anybody can find what I'm doing wrong in the second function.