Forum Discussion

Explorer | Level 3

11 months ago

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 ?

Здравко
11 months ago
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
11 months ago
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
  Explorer | Level 3
  11 months ago
  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
  - Здравко
    Legendary | Level 20
    11 months ago
    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.