cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
We just wanted to say thank you! Check out our customer appreciation video here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Re: Download files as blob using dropbox chooser

Download files as blob using dropbox chooser

HARITJOSHI1
Helpful | Level 5

So I have integrated dropbox into my react app and my app successfully opens a dropbox dialog box, signs in users and list their files and folders. I am facing issues with the downloading of the selected files as blobs. Here is my code which handles the listing of files.

 

 

 

 

 

 case 'DROPBOX':
          const successCb = async (
            files: ReadonlyArray<Dropbox.ChooserFile>
          ) => {
            console.log(files);
            const blobs = files.map((f) => {
              return axios.get(
                f.link + '?dl=1',
                {
                  responseType: 'blob',
                  headers: {
                    Authorization: `Bearer MY_TOKEN`,
                  },
                }
              );
            });

            console.log(await Promise.allSettled(blobs));
          };

          createDropboxChooser(
            { successCb },
            {
              multiselect: true,
              folderselect: true,
              extensions: ['.pdf'],
            }
          );
          break;
      }

 

 

 

 

 I have tried to use dl=1 query param to force download files but nope not working!

5 Replies 5

Greg-DB
Dropbox Staff

Can you elaborate on what you mean when you say it's "not working"? What error or unexpected output do you get?

 

Looking at the code you provided though, there's a few things to note:

  • It looks like you're not setting the "linkType" option, so it will default to "preview". In a case like this where you need to retrieve the file data programmatically, you should set "linkType" to "direct" so it will give you a temporary direct link to the file content, so you don't need to use the dl=1 option. (Also, note that if you do use the dl=1 option, you should actually parse the URL and update the URL parameter, instead of just appending it as you are. Just appending it may not produce a properly formatted URL, as it may not replace any existing URL parameters.)
  • You seem to be setting a Bearer token on the request to download the data, but this is not necessary or expected. These links don't take access tokens.

HARITJOSHI1
Helpful | Level 5

@Greg-DB 

 

By "not working" I meant the error I was getting Access to XMLHttpRequest at https://www.dropbox.com/s/97110ukmvhj7s9s/SOME_PDF.pdf?dl=0  from origin http://localhost:3000  has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

I have already set :

in the app console for my app for development purposes.

 

I have already tried to set linkType to "direct" previously but then I got a pop-up box showing Uh oh! Seems like this widget is not configured properly.
Cannot enable both folder select and direct links. Before that everything was working except the issue I posted here.

 

And I also didn't get what you mean by URL parsing stuff.

Greg-DB
Dropbox Staff

I see, thanks for the additional information. Unfortunately the Dropbox Chooser doesn't support direct links for folders, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.

 

And Dropbox shared links on www.dropbox.com themselves unfortunately don't support CORS, so I'm afraid I don't have a good solution to offer here.

 

In any case, regarding the URL parsing, the code you shared could result in an incorrect URL like "https://www.dropbox.com/s/97110ukmvhj7s9s/SOME_PDF.pdf?dl=0?dl=1", instead of the correct "https://www.dropbox.com/s/97110ukmvhj7s9s/SOME_PDF.pdf?dl=1", since you're just appending instead of replacing the URL parameter, if already present.

HARITJOSHI1
Helpful | Level 5
Ohh I actually tried to get around that but still got CORS error and I'm confused about direct and shared links they are not working in the way I want as you are saying it's a feature yet to implement then why url of the content is included as a response when a file is selected?

What should I do is there any workaround that you can suggest??

Greg-DB
Dropbox Staff

The "preview" links are typically meant for manual use, where CORS wouldn't be relevant.

 

Dropbox does also support those "dl" and "raw" parameters on preview/shared links, but that would only work in non-CORS environments, e.g., downloading a file on a server, not in a browser.

 

As for a workaround, you would need to perform this in a non-CORS environment like, such as using a local non-browser client, like curl, or on a server of your own. That would be more work though. Apologies I don't have a better solution to offer.

Need more support?