Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multipart image upload not working with fetch but with RapidAPI #388

Open
FrazeColder opened this issue Apr 24, 2024 · 0 comments
Open

Multipart image upload not working with fetch but with RapidAPI #388

FrazeColder opened this issue Apr 24, 2024 · 0 comments

Comments

@FrazeColder
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant