Axios request not receiving formData with content-type set

Question

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?

Send data: { asdf: “zzz” } and let us now if it works. From the code you posted it’s normal to think you are again sending empty objects and logging to console the content of uploadData rather than data. Please edit your question to the actual code you are running!!! — vortex, May 18 '19 at 21:40
Let me know if there's anything I missed, I updated my question after you posted your answer. I hard coded the data like this `uploadData.append("data", { asdf: "test" });` And the axios request still is empty — Snoopy, May 18 '19 at 21:53
No ... where you make the axios request the data you send is highlighted by the key data and the value should be uploadData. You are sending axios({“data”: data}) which is incorrect because there is no data variable — vortex, May 18 '19 at 21:57
AHHHHHHHH hahah, I feel like a dunce! I see what you are saying. The function I am calling addProjects is being passed an object and not the actual freaking form... WOW — Snoopy, May 18 '19 at 22:00
Does it work now that you are sending the correct data ? If it does can you accept the answer I posted originally ? Cheers ! — vortex, May 18 '19 at 22:09
@vortex, I accepted your answer my man. I gotcha =], thanks again — Snoopy, May 18 '19 at 22:10

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Welp, this is what happens when your eyes stare at a screen too long.

  this.props.addProject({
      title: this.state.title,
      company: this.state.company,
      description: this.state.description,
      role: this.state.role,
      skills: this.state.skills,
      uploadData: uploadData
    });

Needed to simply be: this.props.addProject(uploadData)

Thank you @vortex

edited Jun 20 '20 at 09:12

Community

1
1

answered May 18 '19 at 22:02

Snoopy

1,257
2
19
32

score -3 · Accepted Answer · answered May 18 '19 at 20:31

-3

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

answered May 18 '19 at 20:31

vortex

862
8
14

Its supposed to be the comment, not an answer. – Sudhir Dhumal May 18 '19 at 20:36
That’s if you assume OP made a typo – vortex May 18 '19 at 20:41
Agree, but we can get it clarified in comments section itself and then show the right way to do it. – Sudhir Dhumal May 18 '19 at 20:44
I updated my post to make it clear to what data I passed to axios – Snoopy May 18 '19 at 20:53
I am sorry the answer doesn’t satisfy you, however it’s supposed to be OP decision. If you want to justify the “we” in your previous comment then you are free to edit my answer and pinpoint the issue with code blocks. Going off topic or bickering about won’t improve anything – vortex May 18 '19 at 20:54
@user10204157 when you post to the add-project route I see the data sent variable as being called “data” whereas the variable you create and populate with entries is called “formData” - I don’t see anything changed in that regard. Is this correct ? – vortex May 18 '19 at 20:58
I pass uploadData in as data into the add-project route. I updated my question with the entire function itself. I wanted to leave it out so I didn't bring Redux into this. My apologies. – Snoopy May 18 '19 at 21:04
@user10204157 possible duplicate of https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data then. If you are truly using the correct variables the boundary or web server antics you are facing is niche - while you edited the code to reflect your actual function now you skipped the part where you actually execute the post. At this point I would send some hardcoded values just to make sure I can POST – vortex May 18 '19 at 21:15
I tried the suggested duplicate and it is still happening. I tested my POST route already all of that is fine. --Thanks for giving your input and making sure i'm checking all of this – Snoopy May 18 '19 at 21:23

Axios request not receiving formData with content-type set

2 Answers2