Issues downloading files using Dropbox JavaScript SDK

Question

I am attempting to download a file, to the Webapp itself on the client side, using the Dropbox Javascript SDK.

I want to make it clear that I only wish to download a file to a folder in the web app; I understand that due to security concerns this may not actually be possible.

I am following the documentation provided in:

http://dropbox.github.io/dropbox-sdk-js/index.html

http://dropbox.github.io/dropbox-sdk-js/Dropbox.html#filesDownload__anchor

This is my controller code:

$scope.testDownload = function() {
  console.log('Testing Download');
  dbx.filesDownload( {path: '/Collorado Springs.jpg'} ) // Just a test file
    .then(function(response) {
      console.log(response);
    })
    .catch(function(error) {
      console.log(err);
  });
};

I can definitely see that a download does take place as it is shown in the Chrome Network tool as shown below:

(I do not have enough reputation to insert multiple links so please interpet this shared "link" I generated)

https:// www.dropbox.com/s/s0gvpi4qq2nw23s/dbxFilesDownload.JPG?dl=0

I believe this is either me lacking knowledge of working with file downloads, or mis-using JavaScript.

Thank you in advance for any help you can provide.

What are you stuck on exactly? It looks like you are getting the expected log statements. If you're looking for a way to offer that data to the user to download to their machine, check out [this example](https://github.com/dropbox/dropbox-sdk-js/blob/master/examples/download/index.html#L51). (It's a different API method, but it works the same way.) — Greg, Oct 11 '16 at 17:44
Apologies for the lack of clarity. The overall aim here is to download a file from a users dropbox into a 'downloads' folder within the webapp itself (this can be client or server side, I am not fussed); I do not mean the users downloads folder. I tried the method you kindly referenced and it does what you say, which is unfortunately not what I want. I can download using the 'filesDownload' method but I don't know how to move the resultant file or work with it to get the result I want. The idea is this all happens behind the scenes with JavaScript. — LJH, Oct 12 '16 at 15:53
I'm not sure I follow, but it sounds like the Dropbox API call is working properly, so I'm afraid I can't be of much more help, as this sounds like more of a general JavaScript data handling question. — Greg, Oct 12 '16 at 18:50

score 1 · Accepted Answer · answered Feb 07 '17 at 11:16

If you wish to download and use files in a web app, then it is far better to set up a backend server and use that to temporarily store content, with the users permission of course.

To do this, make an HTTP request, then use Express to handle the request by calling a Dropbox service server-side, then use code such as the following:

'use strict';
var Dropbox = require('dropbox');
var fs = require('fs');
var path = require('path');

exports.downloadFile = function(token, id, eventID, fileType, callback) {
  var dbx = new Dropbox({ accessToken: token });  // creates post-auth dbx instance
  dbx.filesDownload({ path: id })
    .then(function(response) {
      if(response.fileBinary !== undefined) {
        var filepath = path.join(__dirname, '../../images/Events/' + eventID + '/' + fileType + '/Inactive/', response.name);
        fs.writeFile(filepath, response.fileBinary, 'binary', function (err) {
          if(err) { throw err; }
          console.log("Dropbox File '" + response.name + "' saved");
          callback('File successfully downloaded');
        });
      }
    })
    .catch(function(err) {
      console.log(err);
      callback('Error downloading file using the Dropbox API');
    })
}

module.exports = exports;

Adarsh Konchady · Answer 2 · 2020-12-27T22:06:14.750

There is a way to do this on the client as well without having to roll your own server implementation as the accepted answer suggests.

For anyone else that has this issue, you can use the FileReader API.

$scope.testDownload = function() {
  console.log('Testing Download');
  dbx.filesDownload( {path: '/Collorado Springs.jpg'} ) // Just a test file
    .then(function(response) {
      console.log(response);
      const reader = new FileReader();
      const fileContentAsText = reader.readAsText(response.result.fileBlob);
      reader.onload = (e) => {
        console.log({ file: reader.result }); // Logs file content as a string
      };
    })
    .catch(function(error) {
      console.log(err);
  });
};

Issues downloading files using Dropbox JavaScript SDK

2 Answers2

Linked