how to send array of objects inside an array using FormData API with content-type set to multipart/formdata #5616
Replies: 3 comments 5 replies
-
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. |
Beta Was this translation helpful? Give feedback.
-
When you want to add an object to |
Beta Was this translation helpful? Give feedback.
-
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: 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"
} |
Beta Was this translation helpful? Give feedback.
-
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?
Beta Was this translation helpful? Give feedback.
All reactions