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!