Download file from Dropbox

bbijals

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

chirstius

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