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: 

Javascript to Run Download Function on My Files?

Javascript to Run Download Function on My Files?

Matthew S.22
Explorer | Level 4
Go to solution

Greetings,

 

In a previous discussion, I solved how to upload files to pages in my app via a web form.  Now I need to dynamically provide a "download" link to the file that was previously attached to that page.  I'm working in PHP, and using the Javascript SDK.

 

Details/Workflow:

1. Page is saved to my DropBox app via Javascript/PHP form.  My PHP code saves the file name for reference.  This is working great!

2. Admins visit the page created in step 1 and automatically see a "Download" link to the file saved in step 1.

 

I'm assuming I would use the Javascript "filesDownload" function, with the file name dynamically added to the code.  But I can't seem to get the basic code to make it work.

 

Here's the Javascript SDK link I'm looking at: https://dropbox.github.io/dropbox-sdk-js/Dropbox.html#filesDownload__anchor

 

Can someone help me with the specific Javascript code needed for this?

 

Thanks,

Matthew

2 Accepted Solutions

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution

Hi Matthew, the filesDownload method is the right way to directly download a file from a Dropbox account using the JavaScript SDK.

 

What do you have so far and what's giving you trouble in particular? There's a sample of using sharingGetSharedLinkFile available here for reference. When using filesDownload you would pass in a path (instead of a URL), but handling the response is the same.

 

For example, switching in the method, it would look something like this:

 

 

    dbx.filesDownload({path: '/test.txt'})
      .then(function(response) {

        var downloadUrl = URL.createObjectURL(response.fileBlob);
        var downloadButton = document.createElement('a');
        downloadButton.setAttribute('href', downloadUrl);
        downloadButton.setAttribute('download', response.name);
        downloadButton.setAttribute('class', 'button');
        downloadButton.innerText = 'Download: ' + response.name;
        document.getElementById('results').appendChild(downloadButton);
      })
      .catch(function(error) {
        console.error(error);
      });

 

 

View solution in original post

Greg-DB
Dropbox Staff
Go to solution
Yes, you can download with the shared link. For example, my version in my last post using filesDownload only requires the path, and not shared link.

View solution in original post

6 Replies 6

Greg-DB
Dropbox Staff
Go to solution

Hi Matthew, the filesDownload method is the right way to directly download a file from a Dropbox account using the JavaScript SDK.

 

What do you have so far and what's giving you trouble in particular? There's a sample of using sharingGetSharedLinkFile available here for reference. When using filesDownload you would pass in a path (instead of a URL), but handling the response is the same.

 

For example, switching in the method, it would look something like this:

 

 

    dbx.filesDownload({path: '/test.txt'})
      .then(function(response) {

        var downloadUrl = URL.createObjectURL(response.fileBlob);
        var downloadButton = document.createElement('a');
        downloadButton.setAttribute('href', downloadUrl);
        downloadButton.setAttribute('download', response.name);
        downloadButton.setAttribute('class', 'button');
        downloadButton.innerText = 'Download: ' + response.name;
        document.getElementById('results').appendChild(downloadButton);
      })
      .catch(function(error) {
        console.error(error);
      });

 

 

Matthew S.22
Explorer | Level 4
Go to solution

Greg,

 

Yes, that's the code I used, and it does get me to the file.  However, the problem is, the user will not know the "shared link."  The way this app works is, people upload a file for a page, then come back to that page to see the file that was uploaded to it.  As far as I can tell, the only way to see the shared link is to go to the DropBox page.

 

Is there a way to get the file another way, without the shared link?

 

Thanks,

Matthew

Greg-DB
Dropbox Staff
Go to solution
Yes, you can download with the shared link. For example, my version in my last post using filesDownload only requires the path, and not shared link.

Matthew S.22
Explorer | Level 4
Go to solution

Hi Greg,

 

Got it!  It's working now.

 

After using the DropBox API for a while, I have come to really like the Javascript elements.  I just find it challenging to locate examples.  There is a pattern to the API calls, but each one is different enough that I need to see specific code.

 

Now I can upload a file to a specific page, and can also download the file that was uploaded on that page.  I may need to return later for deeper methods: delete the file from the page, or overwrite an existing file with a newly uploaded one.

 

As I confirm the methods for each action, I'm planning to document them, either here or on jsfiddle.

 

Thanks,

Matthew

Fabito
Explorer | Level 4
Go to solution

Hi Greg

 

I am using your example to download a file from a Dropbox account using the JavaScript SDK. My code is this:

 

function downloadFile() {
      var ACCESS_TOKEN = "<REDACTED>"; // 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;
}

But I can't get the file downloaded in my computer.

 

In my file html, I am reading the javascript to execute it in my button

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <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="js/Dropbox-sdk.min.js"></script>
    <title></title>
  </head>
  <body class="container" role="document">
    <header>
      <div id="encabezado"></div>
    </header>
    <main class="contenido">
    <ul class="nav nav-tabs nav-justified pilas">
      <li><a id="inactiva" href="inicio.html">Inicio</a></li>
      <li><a id="inactiva" href="estrategias.html">Estrategias</a></li>
      <li><a id="inactiva" href="admin.html">Administración</a></li>
      <li><a id="inactiva" href="cargar.html">Cargar documentos</a></li>
      <li class="active"><a id="activa" href="#">Contacto</a></li>
     </ul>
     <div class="panel panel-success panel-contenido">
      
      <div class="panel-body">
         <p>
         </p>
         <a name="boton" id="descargar" class="btn btn-primary" href="" onclick="downloadFile()"><span class="glyphicon glyphicon-cloud-download"></span> Descargar archivo</a>
         <h2 id="results"></h2>
       </div>
      </div>
    </main>
     <footer>
      <div id="data">
      </div>
      
    </footer>
  </body>
</html>

Also, the file Ricardo-Derechos.pdf is on my Dropbox.

 

Can you help me to find my error?

Greg-DB
Dropbox Staff
Go to solution

@Fabito This is an old thread, so in order to not spam anyone else on it, please open a new thread for your question

 

https://www.dropboxforum.com/t5/forums/postpage/board-id/101000014

 

Also, please let me know exactly what part of your code isn't working as expected, or what you're stuck on, and share the output or error you are getting. You don't seem to actually be accessing the 'response.fileBlob' in your code at all.

 

By the way, I redacted it from your post, but for the sake of security, you should disable that access token, since you posted it publicly. You can do so by revoking access to the app entirely, if the access token is for your account, here:

 

https://www.dropbox.com/account/connected_apps

 

Or, you can disable just this access token using the API:

 

https://www.dropbox.com/developers/documentation/http/documentation#auth-token-revoke

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
  • User avatar
    Fabito Explorer | Level 4
  • User avatar
    Matthew S.22 Explorer | Level 4
What do Dropbox user levels mean?