How to post data when you have javascript object using multipart/form-data content-type

Question

So I have never post a data using FormData and multipart/form-data as Content-Type in my React project. But now I'm kinda forced by backend to send it this way since we have some images in payload.

The problem is that the whole data is a JS object and can be parsed to JSON, and nothing more. So how can I convert my JS object into a valid FormData that backend would accept it? Everything works without a problem in Postman, but in the app I always get the same error.

Here is some more detail:

The working Postman sample:

What I expect to be working (but obviously doesn't):

const createProd = () =>
  HttpRequest.post('/api/prod', {
    body: {
      Product: {
        title: 'Test Prod',
        shop: null,
        description: "My new ad's description",
        category: { id: '5d8c6aa6fadeaf26b0194667' },
        condition: 'USED'
       }
    });

HttpRequest is a helper function which uses ES6 fetch for requests.

I always get the same error: "Required request part 'Product' is not present" with/without JSON.stringify.

I even tried to create a sample FormData to at least change the error:

cont payload = new FormData();
payload.append('Product', {foo: 'bar'});

But still same error. I also copied the code which is generated by Postman. But still no chance.

I would be thankful if you share your suggestions or workarounds.

Thanks in advance.

What is this HttpRequest? Is it axios? Where did you try to put this JSON.stringify? Inside body? What backend language do you use? Did you try adding headers to your request? — k-wasilewski
– k-wasilewski, Commented Nov 11, 2020 at 16:02
@k-wasilewski I mentioned that I'm using fetch in my React project. I also mentioned that I tried it with/without JSON.stringfy. Anyway, I used axios and my problem solved. — erfoon
– erfoon, Commented Nov 13, 2020 at 21:54

Nguyễn Tây Trung · Accepted Answer · 2020-11-11 16:10:53Z

2

const formData = new FormData();
const product = { //your product object };
formData.append('product', JSON.stringify(product));

const config = {
  headers: {
    'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
  }
};
axios.post(`/api/ads`, formData, config).then((res) => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

Maybe you should set header. Try this one. In my case I used Axios. It worked for me in my project.

answered Nov 11, 2020 at 16:10

Nguyễn Tây Trung

1462 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

erfoon Over a year ago

Thank you! I guess using axios and not fetch was the key of my problem. Probably there are some ways of using fetch but they may not be as straightforward as the way we can do it with axios.

Collectives™ on Stack Overflow

How to post data when you have javascript object using multipart/form-data content-type

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related