Download file from Dropbox with JavaScript

Tigran picture Tigran · Apr 3, 2013 · Viewed 7.5k times · Source

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:

enter image description here

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

Christer picture Christer · Apr 30, 2013

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;
    }
}