Issues downloading files using Dropbox JavaScript SDK

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.

Answer

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;