Start 2025 on time and up to date. Seamlessly integrate your calendars into Dropbox with these simple steps.
Forum Discussion
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...
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.
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
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.
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.
Thank you so much. You are very down to earth
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?
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
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
