Using OAuth2 to Get file list On Dropbox

If API is already deprecated, please report it by using this button


We wanted to figure out the easiest way to use OAuth to get file list from Dropbox on behalf of a Dropbox user using Javascript. Here is how we did it with

Code Snippet

Try this snippet. Once you log in with your Dropbox account it will get the list of files in your account. Feel free to tweak it to get file list from different folders, etc.

Code Explanation:


<a id="dropbox-button" class="btn btn-block btn-social btn-dropbox">
  <i class="fa"></i> Get file list




var params = {
  "path": ""
$('#dropbox-button').on('click', function() {
  // Initialize with your app public key
  // Use popup for oauth
  // Alternative is redirect
  OAuth.popup('dropbox').then(provider => {
    console.log('provider:', provider);
    alert("You can check Dropbox provider object in browser console.");{
      url: "/files/list_folder",
      data: JSON.stringify(params),
      headers: {
         "Content-Type": "application/json"
    }).then(data =>             {
      console.log('Files:', data);
      alert("You can find file list in browser console");

External Requirements

This Javascript code has external requirements:

Step-by-step Guide

Here is a summary of the steps to create this social button to get file list from Dropbox on a user's behalf using OAuth2.

  1. Create a Dropbox account, if you do not have one
  2. Create an app on Dropbox using this simple step-by-step guide
  3. Copy your Dropbox app client id and client secret
  4. Signup for account
  5. filesfilesfilesfiles your Dropbox app with by pasting your Dropbox app client id and client secret into
  6. Copy the OAuth javascript snippet ( on to your web page

Live example code for using OAuth to Get file list via Dropbox

Use Line OAuth to:

Use Apple OAuth to:

Use Meetup OAuth to:

Use Snapchat OAuth to:

Use Facebook OAuth to: