React Axios: Upload Multiple Images using FormData()

Question

I'm trying to upload files to the back-end. but it fails

Basically I want to upload 11 images at the same time.

At first I do this

    const title, image1, image2, ... = this.state;
    axios.post(`myapi`, {title, image1, image2})

Here is my state of image 1:

It returns an error of 422 "the given data was invalid"; "image_1": The image field is required.

After several reads online, I found out that to upload and image, you have to use formData. So I tried doing this

const title = this.state.title;

const formData = new FormData();
formData.append('image_1', this.state.image_1);
formData.append('image_2', this.state.image_2);
...
axios.post(`myapi`, {title, formData})

I still get the same 422 error,

tried to console.log the formData

for (var fd of formData) {
  console.log(fd);
}

the results indicate the formData has been appended well. But somehow i could not upload it because it is "invalid data"

Thanks for the help!

researchhubs.com/post/computing/javascript/… hope this can help you — Hardik Chaudhary
– Hardik Chaudhary, Commented Jun 10, 2019 at 13:34
@HardikChaudhary thanks for the reply! I tried adding the filename in the append, and it still does not work. — wlsonf
– wlsonf, Commented Jun 10, 2019 at 13:51

Ashish · Accepted Answer · 2019-06-10 14:24:00Z

2

You are converting the images to FormData but sending them as JSON. You should include title in formData as well.

const formData = new FormData();
formData.append('title', this.state.title);
formData.append('image_1', this.state.image_1);
formData.append('image_2', this.state.image_2);

And send the data with header as multipart/form-data

axios.post(`https://api.cashless.vip/api/homepage`, formData, {headers: {"Content-type": "multipart/form-data"}});

Hope this works.

answered Jun 10, 2019 at 14:24

Ashish

1,1218 silver badges18 bronze badges

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

Comments

Shijan Shrestha · Accepted Answer · 2020-11-05 06:25:49Z

0

add the header {"Content-type": "multipart/form-data"}

answered Nov 5, 2020 at 6:25

Shijan Shrestha

11 bronze badge

Collectives™ on Stack Overflow

React Axios: Upload Multiple Images using FormData()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related