unjs / unjs/ofetch

Multipart image upload not working with fetch but with RapidAPI

Open
#388 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs reproduction
Dominant language
TypeScript
Stars
5.4k
Forks
195
PR merge metrics
No merged PRs in 30d

Description

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:
3fetch

When doing the exact same with RapidAPI:
1RapidAPI

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

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the upload callback in the QuillEditor snippet and compare its fetch request with the working RapidAPI request; inspect how the multipart request appears in Laravel Telescope. Done means identifying why the server receives an empty payload and confirming that a corrected request reaches the backend.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, laravel
Domain
api, backend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.