Search code examples
javascriptreduxaxiosmultipartform-dataform-data

Axios request not receiving formData with content-type set

I have the following data being added to my formData()

let uploadData = new FormData();
uploadData.append("peer-video", this.state.peerVideo);
uploadData.append("peer-video-thumbnail", this.state.peerVideoThumbnail);
uploadData.append("project-video", this.state.projectVideo);
uploadData.append(
  "project-video-thumbnail",
  this.state.projectVideoThumbnail
);
this.state.documents.forEach(item => {
  uploadData.append("documents", item);
});

The uploadData has key value pairs in it, I did formData.entries() to check this. And my axios request is as follows:

   export const addProject = data => dispatch => {
  axios
    .post("/api/portfolio/add-project", data, {
      headers: {
        "Content-Type": `multipart/form-data`
      }
    })
    .then(res => {
      dispatch({
        type: ADD_PROJECT,
        payload: res.data
      });
    })
    .catch(err => {
      dispatch({
        type: ADD_PROJECT,
        payload: err
      });
    });
};

And if I go to my payload in the network tab I see this:

{"uploadData":{}}

Any suggestions? Thank you for taking the time to help me.

Edit I tried the following structure in my axios request and it yielded the same result.

axios({
    method: "post",
    url: "/api/portfolio/add-project",
    data: data,
    config: { headers: { "Content-Type": "multipart/form-data" } }
  })

When I execute the following

   for (let keys of uploadData.entries()) {
      console.log(keys);
    }

These are the values:

I also noticed on formData docs that

Note: If you specify a Blob as the data to append to the FormData object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.

But i'm not sure if that's what is causing my issue here?

Solution

  • Looks like you are posting an undefined variable called data rather than your uploadData