Child Item

Re: Dropbox chooser integrated with a react webapp not working when opened in chrome ios mobile, ipa

hey I am also using react-dropbox-chooser, when I select an image I get it's meta data such as thumbnail link, link, bytes etc. Now I need to send the blob of this file to the server but when I fetch the blob using the link that I got in the response I get CORS error.
Since you are working on the same thing so can you please help me out ?

Find more posts tagged with

Accepted answers

Здравко

@anas saifi wrote:
..., while creating an app on dropbox it asks for domain name but I am running my application on local host. ...

It doesn't ask for, but you need it for your Chooser. In such a case your domain is just localhost. 😉

Good luck.

All comments

Greg-DB

@anas saifi I've moved your post to its own thread, as the original thread did not mention an issue with a CORS error.

Please share the details of the issue, such as the steps/code to reproduce the issue, as well as the full error/output you're getting so we can take a look.

anas saifi

I am using react-dropbox-chooser to integrate Dropbox in my application.

Everything works fine, it allows me to sign in my account and it also displays my files, on choosing an image I get the following data about the image
Image data

Now I need to send the image to server for that I need to get the blob of the image, which I am doing in the following manner
const response=fetch(link)
const blob = await response.blob()
but I am getting the following error
Screenshot 2023-12-23 111632.png

Здравко

Hi @anas saifi,

You have 2 mistakes in your code (only the second got signaled yet).

The link received is a shared link, not raw! Like any other shared link, it points to preview page of the pointed file, not to the file itself. What you're doing is trying to fetching that page HTML, not image data. Even if it was successful, the response wouldn't contain any image. 🙋 To be able access the pointed file content (now image) you need to change the ending "&dl=0" to "&raw=1".

By default fetch wouldn't let you send query to another domain (CORS rules). To be able do it, you need to change the mode to "no-cors". 😉 That's where you issue is coming from - you miss this part.

Try something like:

const response=fetch("https://dropbox.com/scl/fi/p03jwhsifuo35nqdl5y6x/WhatsApp-Image-2023-10-13-at-12.55.24-PM.jpeg?rlkey=8dmxt9wn20us1k0yip9em4rji&raw=1", {mode: "no-cors"})

Hope this helps.

Greg-DB

@anas saifi As Здравко said, those "preview" shared links on www.dropbox.com point to a preview HTML page, not the file data itself, and do not support CORS.

If you want to directly access the file data using CORS, you can use the "direct" link type (instead of "preview") when setting up the Chooser.

anas saifi

Thank you so much. I hope it works.
I have one more question (Last one, promise), while creating an app on dropbox it asks for domain name but I am running my application on local host. How do I resolve it?

Здравко

@anas saifi wrote:
..., while creating an app on dropbox it asks for domain name but I am running my application on local host. ...

It doesn't ask for, but you need it for your Chooser. In such a case your domain is just localhost. 😉

Good luck.

anas saifi

Thank you so much. You are very down to earth

anas saifi

sorry but it didn't workout 🙂

Здравко

@anas saifi wrote:
sorry but it didn't workout 🙂

Hm...🤔 What do you mean? There were number of mistakes... Did you fix all of them and what "didn't workout" exactly?

anas saifi

First of all I harcoded the link and replaced "&dl=0" with "&raw=1" with mode set to "no-cors".

const response = await fetch("https://www.dropbox.com/scl/fi/p03jwhsifuo35nqdl5y6x/WhatsApp-Image-2023-10-13-at-12.55.24-PM.jpeg?rlkey=8dmxt9wn20us1k0yip9em4rji&raw=1",{mode:"no-cors"})

console.log("response is",response)

the following screenshot shows the response of the above call

Screenshot 2024-01-04 222933.png

Здравко

Hm...🤔 Ok, everything seems fine. What's wrong? 🧐

You still haven't consumed the response content (i.e. the image): bodyUsed: false

PS: You question is not Dropbox API related, so take a look in some tutorial/documentation (like here) how you can use such object.

Good luck.