how to send array of objects inside an array using FormData API with content-type set to multipart/formdata

[AmanSharmaDuredev]

Hi Everyone! I am stuck with a problem in which I want to send an object which looks like this:
const obj = {
token_id: 23,
collection_name: "XYZ",
name: ["abc", "abc2"],
description: ["nft", "nft2"],
image: [File, File],
dynamic: ["yes", "no"],
attributes: [[{trait_type: "color", value: "red"},{trait_type: "shape", value: "round"}], [{trait_type: "color", value: "green"},{trait_type: "shape", value: "circle"}]],
};

Now, since I have to send images, I have to use content-type: multipart/form-data in headers and I know that Starting from v0.27.0, Axios supports automatic object serialization to a FormData object if the request Content-Type header is set to multipart/form-data.

So I created a form using FormData API like this:
let form = new FormData();

Then I loop through the array to append the values of the array like this:
form.append("attributes[][]", value)

and then sent it but the back-end gets the attributes array like this:
attributes=[["[object Object]"], ["[object Object]"]].

Why it is adding the quotes(") around the object and why it is not getting the actual object?

[BakhshiMoeez]

In my opinion the reason for this is because formdata only accepts key-value pair where key is generally string, I may not know how to send array of objects inside array but sending the individual objects is possible after flattening the attributes array and i believe there is a built in function flat() for it, but ill look into it and if ill find something ill post asap.

[AmanSharmaDuredev]

I have used key-value pair and sent an array of objects and it worked perfectly fine. This is what it did.
form.append("someKey[]["key1"], value)

I have also tried to append the array of objects inside the array like this:
form.append("attributes[][]["trait_type"], value)
but it didn't work.

Also, there is no sufficient guide & article available to configure the formSerializer object. Please provide more information on the docs for a better understanding of the users.

Thanks for replying...

[wldeh]

When you want to add an object to FormData, it's automatically converted into a string, resulting in the [object Object] format. You need to change the object into a JSON string with JSON.stringify(attr) before adding it to the form data.

[AmanSharmaDuredev]

Yeah. But the backend is getting a stringified object. So is there any other way to append an object without stringifying it first and without appending each key individually?

[DigitalBrainJS]

If your backend supports explicit form indexes (Until PR #5338 is merged, implicit indexes are not supported for nested props), you can try to use automatic serialization:

Demo

import axios from "axios";

console.log(axios.VERSION);

const file = new Blob(["123"]);

const data = {
  token_id: 23,
  collection_name: "XYZ",
  name: ["abc", "abc2"],
  description: ["nft", "nft2"],
  image: [file, file],
  dynamic: ["yes", "no"],
  attributes: [
    [
      { trait_type: "color", value: "red" },
      { trait_type: "shape", value: "round" }
    ],
    [
      { trait_type: "color", value: "green" },
      { trait_type: "shape", value: "circle" }
    ]
  ]
};

axios
  .post("https://httpbin.org/post", data, {
    headers: {
      "Content-Type": "multipart/form-data"
    }
  })
  .then(({ data }) => {
    console.log(data);
  });

Log

files: {
  image[]: "123"
},
form: {
  attributes[0][0][trait_type]: "color"
  attributes[0][0][value]: "red"
  attributes[0][1][trait_type]: "shape"
  attributes[0][1][value]: "round"
  attributes[1][0][trait_type]: "color"
  attributes[1][0][value]: "green"
  attributes[1][1][trait_type]: "shape"
  attributes[1][1][value]: "circle"
  collection_name: "XYZ"
  description[]: Array(2)
  dynamic[]: Array(2)
  name[]: Array(2)
  token_id: "23"
}

This works fine with express+multer

[AmanSharmaDuredev]

Okay... Let me try that and see if this works with my conditions. Thank you for giving your time...

[GoktugYalcin]

I know its too late but this worked for me... Thanks a lot

[SviatoslavBond]

Thar helped me a lot especially this axios docs article #https://axios-http.com/docs/multipart