i am new to react and i've looked everywhere for an answer to this problem , i'm trying to submit from data to a custom api i don't control, my problem is one of the request body fields is supposed to be an array to upload multiple file images , like so (serviceImages)
{
"addServiceReq": {
"servicesNameAr": "string",
"servicesNameEn": "string",
"servicesDescriptionsAr": "string",
"servicesDescriptionsEn": "string",
"servicesPrice": 0,
"servicesTypeId": 0,
"extraServices": "string"
},
"serviceImages": [
"string"
]
}
this is how i'm handling my request
const addServiceReq = {
servicesNameAr: formData.servicesNameAr,
servicesNameEn: formData.servicesNameEn,
servicesDescriptionsAr: formData.servicesDescriptionsAr,
servicesDescriptionsEn: formData.servicesDescriptionsEn,
servicesPrice: parseInt(formData.servicesPrice),
servicesTypeId: parseInt(TypeId),
extraServices: parsedExtraServices,
};
const formPayload = new FormData();
formPayload.append('addServiceReq', JSON.stringify(addServiceReq));
let s = [];
for (let i = 0; i < formData.serviceImages.length; i++) {
s.push(formData.serviceImages[i]);
}
formPayload.append(`serviceImages`, s);
const response = await axiosInstance.post(
'API/URL',
formPayload,
{
headers: {
Authorization: `Bearer ${accessToken}`,
},
}
);
my request works fine in postman where the code snippet behind it is
--form 'serviceImages=@"/Users/fay/Desktop/cosmetics.png"'
--form 'serviceImages=@"/Users/fay/Desktop/cosmetics 2.png"'
but the payload in the browser looks like this
serviceImages: [object File],[object File]
i have no idea what i'm doing wrong here , i would appreciate any help