cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Want to learn some quick and useful tips to make your day easier? Check out how Calvin uses Replay to get feedback from other teams at Dropbox here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Download file from Dropbox

Download file from Dropbox

bbijals
Explorer | Level 4
Go to solution

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

1 Accepted Solution

Accepted Solutions

chirstius
Dropbox Staff
Go to solution

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

 

View solution in original post

1 Reply 1

chirstius
Dropbox Staff
Go to solution

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

 

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    chirstius Dropbox Staff
What do Dropbox user levels mean?