Forum Discussion

bbijals's avatar
bbijals
Explorer | Level 4
7 years ago
Solved

Download file from Dropbox

I have a Chrome based app developed in AngularJS. We wanted to provide dropbox functionalities within the app. I am looking to download files uploaded to dropbox from this chrome app.  I have tried to implement the code using dropbox api / download. It returns status of 200 and response object. If the file is a text file it returns the content of the file and if it is some other extension, it returns only name of the file. It does not return the metadata information as mentioned the api documentation.

 

Also how do i physically download the file from dropbox to my local pc (Same has download link we have on dropbox). The code that i have written so far is as follows:

 

    $scope.onDropboxFileDownload = function (filename, filerev,$event)
    {
                

            var xhr = new XMLHttpRequest();

            xhr.onload = function () {
                if (xhr.status === 200) {


                    var fileInfo = xhr.response;
                    // Download succeeded. Do something here with the file info.
                    console.log('Downloading file (' + fileInfo + ') to dropbox succeeded...', LOG_INFO);

                   
                    var file = new Blob([xhr.response],{type: "text/plain"});
                    var aLink = document.createElement('a');
                    aLink.href = window.URL.createObjectURL(file);
                    aLink.download = "file_" + new Date() + ".pdf";
                    aLink.target = "_blank";
                    aLink.click();
                   

                   $scope.alertMessage = "File: " + fileInfo + " downloaded successfully!";
                    $scope.showAlert = true;
                }
                else {
                    var errorMessage = xhr.response || 'Unable to upload file';
                    // Upload failed. Do something here with the error.
                   console.log('Dowonloading file (' + filename + ')to dropbox failed with an error: ' + errorMessage, LOG_INFO);
  
                }
                $scope.$digest();
            };
           
            xhr.open('POST', 'https://content.dropboxapi.com/2/files/download');
            xhr.setRequestHeader('Authorization', 'Bearer ' + $scope.dboxAccessToken);
            xhr.setRequestHeader('Content-Type', 'application/octet-stream');
            xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
                path: '/' + filename,
                rev: filerev
            }));

            xhr.send(); 
    }

  • Hello bbijals, might I first suggest giving the Dropbox Javascript SDK a look as I think it will simplify much of the boilerplate code required when submitted with xhr's.

     

    One way to directly download a file via the SDK might be as follows:

     

    dbx = new Dropbox.Dropbox({ accessToken: TOKEN });
    dbx.filesGetTemporaryLink({path: PATH_TO_FILE}) .then(function(response) { var link = document.createElement("a"); link.href = response.link; document.body.appendChild(link); link.click(); document.body.removeChild(link); delete link; }) .catch(function(error) {
    // handle error console.log(error); });

    This code gets a temporary link to a given file, it then creates a hidden hyperlink pointing to the newly created link, clicks it on behalf of the user, and then cleans it up.

    You can use code like this in a handler to trigger a direct download via the native OS file save dialog.

    Hope that helps!

     

    -Chuck

     

  • Hello bbijals, might I first suggest giving the Dropbox Javascript SDK a look as I think it will simplify much of the boilerplate code required when submitted with xhr's.

     

    One way to directly download a file via the SDK might be as follows:

     

    dbx = new Dropbox.Dropbox({ accessToken: TOKEN });
    dbx.filesGetTemporaryLink({path: PATH_TO_FILE}) .then(function(response) { var link = document.createElement("a"); link.href = response.link; document.body.appendChild(link); link.click(); document.body.removeChild(link); delete link; }) .catch(function(error) {
    // handle error console.log(error); });

    This code gets a temporary link to a given file, it then creates a hidden hyperlink pointing to the newly created link, clicks it on behalf of the user, and then cleans it up.

    You can use code like this in a handler to trigger a direct download via the native OS file save dialog.

    Hope that helps!

     

    -Chuck

     

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.5,948 PostsLatest Activity: 11 minutes ago
351 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!