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 fo

Solution 1:

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';
varDropbox = require('dropbox');
var fs = require('fs');
var path = require('path');

exports.downloadFile = function(token, id, eventID, fileType, callback) {
  var dbx = newDropbox({ 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;

Solution 2:

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 = newFileReader();
      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);
  });
};