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 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 ?
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.
- Greg-DB
Dropbox Staff
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.
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 dataNow 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 errorHi 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.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
