Forum Discussion

HARITJOSHI1's avatar
HARITJOSHI1
Helpful | Level 5
3 years ago

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's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox 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's avatar
      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.