submitting multiple files as array ,with react axios

17 views Asked by At

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

0

There are 0 answers