Sending File With UseFetch Nuxt3 To Laravel

I am sending post request to Laravel. Request have image and other data fields.

async createGallery(payload: any){
      const formData = new FormData();
      for (const key in payload) {
        formData.append(key, payload[key]);
      }
      for (const entry of formData.entries()) {
        console.log(`Key: ${entry[0]}, Value: ${entry[1]}`);
      }

      return await new Promise((resolve, reject) => {
        let that  = this;
          const { data, error, pending, refresh } = useCustomFetch<object>('/api/admin/galleries', {
              method: 'post',
              body: formData,
              onResponse({ request, response, options }) {
                if (response.status == 200) {
                  resolve(response._data?.message);
                }
              },
              onResponseError({ request, response, options }) {
                console.log(response);
                that.settings.setValidationErrors(response._data.validation_errors);
              }
          });
      });
    },

The problem that I have 2 fields in Object type. when sending with FormData its output in console :

Key: type, Value: slider
Key: status, Value: 0
Key: order_item, Value: 57
Key: image, Value: [object File]
Key: en, Value: [object Object]
Key: ar, Value: [object Object]

key en and ar sent with [object] type. I (have) to send it with formData because I am sending image file. When I was sending with payload its ok and it's format like :

'en' =>
array (
'title' => 'Veritatis nesciunt',
'short_description' => 'Inventore omnis vita',
),
'ar' =>
array (
'title' => 'Voluptatem aspernatu',
'short_description' => 'Architecto tempor el',
),

but I can not send file with payload.
How to send object form data with new FormData(); ?

Comments

[Hussien Elshazly]

Solved by edit the method :

async createGallery(payload: any) {
      let that = this;
      const formData = new FormData();
      for (let [key, value] of Object.entries(payload)) {
        if(Object.values(that.settings.locales).includes(key))
          continue;
        formData.append(key, value);
      }
      Object.values(that.settings.locales).forEach(function(item)  {
          for (let attribute of ['title','short_description']){
            formData.append(`${item}[${attribute}]`, payload[item][attribute]);
          }
      });

      return await new Promise((resolve, reject) => {
        const { data, error, pending, refresh } = useCustomFetch<object>('/api/admin/galleries', {
          method: 'post',
          body: formData,
          onResponse({ request, response, options }) {
            if (response.status == 200) {
              that.settings.setValidationErrors([]);
              resolve(response._data?.message);
            }
          },
          onResponseError({ request, response, options }) {
            that.settings.setValidationErrors(response._data.validation_errors);
          }
        });
      });
    },