How do I post an Array of images using formdata reactjs

Question

I am trying to post an object with multiple images as an array how do append the images as an array to the formdata

const onSubmit = async (e) => {

    
    const formData = new FormData(); 
    formData.append("image", values.images);
    formData.append("title", values.title);
    formData.append("price", values.price);
    formData.append("quantity", values.quantity);
    formData.append("id", id);

    try {
      const res = await axios.post(
        "//localhost:4000/products/saveProduct",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
     /////////////
<form onSubmit={handleSubmit(onSubmit)}>
        <div className="custom-file mb-4">
          <input
            type="file"
            className="custom-file-input"
            name="image"
            multiple
            placeholder="choose file"
            onChange={handleChange}
          />
//////
  const handleChange = (e) => {
    const { type, name } = e.target;
    const getValue = () => {
      if (type === "checkbox") {
        return e.target.checked;
      } else if (type === "select-multiple") {
        return Array.from(e.target.selectedOptions).map(
          (option) => option.value
        );
      } else if (type === "file") {
        for (let i = 0; i < e.target.files.length; i++) {
          e.target.files[i].url = URL.createObjectURL(e.target.files[i]);
        }
        return Array.from(e.target.files);
      }
      return e.target.value;
    };

Also When I send this to my back end I am getting to an empty object as the req.body

how you handleChange when import images?

danhuong
– danhuong

2021-03-11 14:07:17 +00:00
Commented Mar 11, 2021 at 14:07 — danhuong
– danhuong, Commented Mar 11, 2021 at 14:07
I just added it now so you can see it

tim
– tim

2021-03-11 14:23:41 +00:00
Commented Mar 11, 2021 at 14:23 — tim
– tim, Commented Mar 11, 2021 at 14:23

Szabó Sebestyén · Accepted Answer · 2023-05-24 07:59:47Z

You can append all the images to the same key, for example "images". Then you can parse the request body as multipart formdata on the server, and you get an array of files when you access "images".

for (const image of value.images) {
  formData.append("images", image);
}

Although, if I remember correctly. When you only append one file, it isn't going to be parsed into an array on the server.

Another solution is to create (with useRef) or get (with querySelector) a reference to the form element. Then you can create the formData directly from the form element.

const formData = new FormData(myFormElement);

Then you can append the rest of the data that you want to send.

Abdullah Ayman · Accepted Answer · 2023-10-17 21:04:59Z

2

I have laravel backend and what worked for me was to put square brackets after the name of the key

for (const image of value.images) {
  formData.append("images[]",image);
}

answered Oct 17, 2023 at 21:04

Abdullah Ayman

211 silver badge1 bronze badge

Comments

Md Ariful Islam Roni · Accepted Answer · 2022-08-17 22:32:18Z

1

for (const image of value.images) {
  formData.append("images",JSON.stringify(image));
}

when pass multiple image make string object using JSON.stringify(Object)

answered Aug 17, 2022 at 22:32

Md Ariful Islam Roni

726 bronze badges

Collectives™ on Stack Overflow

How do I post an Array of images using formdata reactjs

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related