Multipart image upload not working with fetch but with RapidAPI

[FrazeColder]

Hey there, 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

[GuppyTheCat]

Seems like i have same problem when uploading big files( >100Mb ). Nuxt frontend sends file and i can see payload in browser, but nuxt server api fails to read it with readMultipartFormData. Sending file straight to remote api works fine.

[pi0]

Please please share a minimal reproduction (or at least any runnable one) in order to allow investigating such issues. 🙏🏼

[GuppyTheCat]

Please please share a minimal reproduction (or at least any runnable one) in order to allow investigating such issues. 🙏🏼

Here is reproduction - file-upload-test On button click you choose file and it should automatically upload. There is just upload to the server api and reading form data but it is enough. If you try to upload files approximately larger than 100Mb, upload will fail.

I get this error:

Error reading multipart form data: Invalid array length

  at Array.push (<anonymous>)
  at parse (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:196:16)
  at readMultipartFormData (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:469:10)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at Object.handler (server/api/upload.post.ts:4:1)
  at async node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:1975:19
  at async Object.callAsync (node_modules/.pnpm/[email protected]/node_modules/unctx/dist/index.mjs:72:16)
  at async Server.toNodeHandle (node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:2266:7)```

[GuppyTheCat]

Sorry, there is problem with h3, i suppose.