Nuxt 3 fetch multipart form data upload is not working

Question

for whatever reason, I am not able to upload the image to my server. But when doing it with RapidAPI and with the exact same image, it works. What am I doing wrong here?

QuillEditor code:

<template>
  <QuillEditor :modules="modules" :toolbar="toolbar" theme="snow" toolbar="full" />
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import ImageUploader from "quill-image-uploader";
const runtimeConfig = useRuntimeConfig();
const { fetch } = useSmartFetch();

export default {
  setup: () => {
    const toolbar = [
      ['image', 'link'],
      ['emoji']
    ];
    const modules = {
      name: "imageUploader",
      module: ImageUploader,
      options: {
        upload: (file) => {
          return new Promise(async (resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file);

            console.log(file)
            console.log(formData)

            const authStore = useAuthStore()
            const response = await $fetch(runtimeConfig.public.api.image.upload, {
              method: 'POST',
              body: formData,
              headers: {
                'Authorization': 'Bearer ' + authStore.accessToken,
                'Content-Type': 'multipart/form-data'
              }
            })


          });
        },
      },
    };

    return { toolbar, modules };
  },
  components: {
    QuillEditor,
  },
};
</script>

When I inspect my request, I have set my Bearer token to authenticate (otherwise I would get an 401 instead of an 422) as well as Content-Type: multipart/form-data. Even my payload contains the form data. This is the beginning of my payload:

-----------------------------118964521239883964394155378140
Content-Disposition: form-data; name="image"; filename="1705385217523.jpg"
Content-Type: image/jpeg
...
...
...

However, in Laravel Telescope my payload is empty:

When doing the exact same with RapidAPI:

Everything works without any problem. Also, the payload is set:

How can this be? I am pretty sure my backend works, it's tested. But I am also sure I am doing the request correctly. Can anybody help me?

Kind regards

Updated (added images of dev console): 204 Options Request:

422 Post Request:

Answer 1

When using FormData you should not explicitly set the Content-Type header. This will prevent your browser from setting the Content-Type header with the boundary expression used to delimit the form fields.

More information can be found on MDN.

So, change your fetch request as such:

const response = await $fetch(runtimeConfig.public.api.image.upload, {
   method: 'POST',
   body: formData,
   headers: {
     'Authorization': 'Bearer ' + authStore.accessToken,
   }
})