Child Item

Download files as blob using dropbox chooser

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!

Find more posts tagged with

API

Abuse

Comments

Greg-DB

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

@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 :

Redirect URIs=http://localhost:3000
Chooser / Saver / Embedder domains=localhost

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

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

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

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.