Download file from Dropbox with JavaScript

Question

I have

I have a web site were try to provide a service to a client to be abel to download from Dropbox a file. For simplicity of development I use Dropbox chooser. For this I enable domains I expect to download from and include <script> tag suggested by Dropbox itself (with corresponding data-app-key) into my HTML page. Everything works sweet.

Problem

Now I need to download a file selected by the user. Dropbox chooser doesn't seem to provide any functionality for this, what it does, is just retrieve an information about file. In my case this is a direct link, to download the file.

To download the file, seems to me, I need to use Dropbox.Client which is defined in another Dropbox javascript library at //cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.9.1/dropbox.min.js

So using that libarry I run the code like this:

//OPTIONS FOR DROPBOX CHOOSER
var options = {
        linkType: "direct",

        // THIS FUNCITON RUNS WHEN USER SELECTS SOMETHING
        // FROM DOPBOX_CHOOSER
        success: function (files) {

            // DEFINE APP KET FOR DROPBOX_CLIENT (KEY, SECRET...), WHICH I GET
            // BY CREATING NEW "CORE API" TYPE:Full Dropbox APPLICATION ON 
            // DROPBOX APP CONSOLE 
            var appKey = { key: 'APP KEY', secret: 'CLIENT SECRET', sandbox: true };

            //INIT CLIENT
            var client = new Dropbox.Client(appKey);

            //TRY TO AUTHENTICATE IT
            client.authenticate(function (error, client) {
                if (error) {
                    console.log(error);
                }
                if (client.isAuthenticated()) {

                    //READ FILES 
                    for (var i = 0; i < files.length; i++) {
                        var file = files[i];
                        client.readFile(file.link, function (error, data) {
                            if (error) {
                                return console.log(error);  // Something went wrong.
                            }

                            alert(data);  // data has the file's contents
                        });
                    }
                } else {
                    console.log("Error on authentication");
                }
            });


        },
        cancel: function () {

        }
    };

    //OPEN DROPBOX_CHOOSER
    Dropbox.choose(options);

But all this fails reporting me:

If I don't call client.authenticate I'm not able to download file as get "Not Authorized error" notification.

Question

How can I resolve this issue. ?

Answer 1

A simple and straightforward solution is using XMLHTTP as follows

function readDropbox(sURL) 
{
    var oRequest = new XMLHttpRequest();
    oRequest.open("GET",sURL,false);
    oRequest.onreadystatechange = function(oEvent) 
    {  
        if (oRequest.readyState === 4) 
        {  
            if (oRequest.status === 200) 
            {  
                console.log(oRequest.responseText)  
            } 
            else  
            {  
                console.log("Error", oRequest.statusText);  
            }  
        } 
    } 
    oRequest.setRequestHeader("User-Agent",navigator.userAgent); 
    try 
    {
        oRequest.send(null)
    } 
    catch (err) 
    {
        alert(err);
    }
    if (oRequest.status == 200) 
    {
        return oRequest.responseText;
    }
    else 
    {
        alert("Error - File not found in Dropbox public folder");
        return null;
    }
}

Answer 2

You do not need to use Dropbox.js to download the file from the link returned by the Chooser. Dropbox.js is a library for connecting the Dropbox Core API, which is separate from the Chooser. The client.readFile function is meant to take a path to a file in an authorized Dropbox account, not a URL to a file as you have it.

Since you already have a direct link to the desired file that doesn't require authentication, you can just directly download it via whatever means is available to your platform. (A simple example might be using curl in your terminal.)

Answer 3

If you want to access the contents of the Dropbox file from your client side javascript code, I suggest you use the server side to get the contents and send them back to the client (using Ajax seems most elegant). It is generally impossible to access the contents of any URL outside the current domain from javascript code (exceptions are references to external javascript code).