You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
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.
Greg-DB
Dropbox Staff
Dropbox Staffanas 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 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.
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?
- 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.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
