Download file from Dropbox with JavaScript

I have

I have a website that is trying to provide a service to a client so that it can download a file from Dropbox. For ease of development, I use Dropbox Selection . To do this, I authorize the domains that I expect to download and add the tag <script>suggested by Dropbox (with the appropriate one data-app-key) to my HTML page. Everything works sweetly.

Problem

Now I need to download the file selected by the user. Choosing Dropbox doesn't seem to provide any features for this; what it does is simply extract file information. In my case, this direct linkis to upload a file.

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

So using this libarry, I run the code as follows:

//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 contents
                        });
                    }
                } else {
                    console.log("Error on authentication");
                }
            });


        },
        cancel: function () {

        }
    };

    //OPEN DROPBOX_CHOOSER
    Dropbox.choose(options);

But all this does not allow me to report:

enter image description here

If I don’t call client.authenticate, I can’t upload the file as a “Not authorized error” error notification.

Question

How can I solve this problem.

+5
source share
3 answers

A simple and straightforward solution is to use 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;
    }
}
+3
source

Dropbox.js , Chooser. Dropbox.js - API Dropbox Core, Chooser. client.readFile Dropbox, URL- , .

, , , . ( curl .)

0

If you want to access the contents of a Dropbox file from your client-side javascript code, I suggest you use the server side to receive the content and send it back to the client (using Ajax seems most elegant). As a rule, it is impossible to access the contents of any URL outside the current domain from javascript code (exceptions are links to external javascript code).

0
source

All Articles