Download files from Dropbox using SDK Javascript

[Fabito]

Hi, all

I'm trying download files from my Dropbox using SDK Javascript, but I can't. I'm calling this code from my button html, but nothing happen. Don't show error message or something. I readed about the "filesDownload" documentation and apparently is the same code for upload files (that I founded to upload files with SDK Javascript)

This is my code

function downloadFile() {
      var ACCESS_TOKEN = ""; // Here the access token key
      var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });
      
   
    dbx.filesDownload({ path: '/5. Productos de las LGAC/Estudiantes/Generación 2018-2020/Artículos/Ricardo-Derechos.pdf'})
        .then(function(response){
          var results = document.getElementById('results');
          results.appendChild(document.createTextNode('File Downloaded!'));
          console.log(response);
        })
        .catch(function (error) {
        console.error(error);
    });
    return false;
}

If somebody can help me to find out the problem, will be very appreciated

Regards

[Greg-DB]

What version of the JavaScript SDK are you using? If you're using the latest version, you should get this error:

Uncaught TypeError: Dropbox is not a constructor

from this line:

var dbx = new Dropbox({ accessToken: ACCESS_TOKEN });

If you're not using the latest version, please do upgrade and switch to using this constructor:

var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });

Let me know if that doesn't help.

[Fabito]

Hi again.

The version that I was using is 4.1.1. After your message I tried change it and use this: 

<script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js"></script>

 Also I wrote the code suggested

var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });

 But nothing happen. I push the button and only the page is refreshed. Thanks for the help

[Greg-DB]

This code is working for me. Do you get any error or output in the console?

Can you provide a more complete sample page for this issue? It sounds like you may have the button hooked up to a different event, e.g., submitting a form, or something to that effect, causing the refresh.

[Fabito]

Hi Greg

I did a new html file, and I introduced the code and apparently works. In my application doesn't show error, just the text File Downloaded after push the button, but the I can't get the file. I searched in folder downloads and nothing appears. The code is the same, adding your last comments:

<script type="text/javascript">
  $(document).ready(function(){
    $('#btnguardar').click(function(){
      var ACCESS_TOKEN = ""; // Here the access token key
      var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
      
   
   dbx.filesDownload({ path: '/5. Productos de las LGAC/Estudiantes/Generación 2018-2020/Artículos/Ricardo-Derechos.pdf'})

        .then(function(response){
           var results = document.getElementById('results');
           results.appendChild(document.createTextNode('File Downloaded!'));

           console.log(response);
       
        })
        .catch(function (error) {
        console.error(error);
    });
    return false;
})       
  });

</script>

 And I am using at the begining this:

<link rel="stylesheet" media="screen" href="css/bootstrap.min.css">
    <link rel="stylesheet" media="screen" href="css/stylo.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js"></script>

The next image is the result of push the button.

Regards

[Greg-DB]

To clarify, are you getting anything in the console with this version?

This code looks fine, but note that it supplies the file information in the 'then' callback; it does not automatically download it to local filesystem of the computer where the browser is running.

In this code, you are appending some text to the 'results' element, and then logging out the response information to the console, if the call was successful. (You're logging out the error information if it was not successful.)

What you do with the result is up to you. The actual file data is available in 'response.fileBlob'. There's an example of using that here:

https://github.com/dropbox/dropbox-sdk-js/blob/master/examples/javascript/download/index.html#L53