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
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!
- 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.
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.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
