Adding Dropbox File Selection to a Web App

Handling file uploads in a browser often means dealing with multipart forms, backend logic, and error handling. The Dropbox Chooser replaces that flow with a pre-built picker that authenticates users and returns file metadata directly to your frontend. Users can browse their entire Dropbox account, while your app only receives the files they explicitly select.

Setting it up takes three steps: create a Dropbox app, add the Chooser script and button, and customize how you handle selected files.

Create a Dropbox App and Grab Your Key

All integrations start with an app created in the App Console. After creation, copy the app key from the app settings page. This key identifies your app to the Chooser.

You don't need full OAuth for the Chooser; it handles authentication internally. If you later build deeper integrations with the Dropbox API, the same app can support both. You can also pair the Chooser with direct API calls using your app key and secret for an OAuth flow.

The Chooser works with any app permission level. Before going live, add your application's domain to the "Chooser/Saver domains" field in app settings — this prevents other sites from impersonating your app. Local testing works without this entry.

Boilerplate: A Button That Browses Dropbox

Start with a minimal HTML page. The snippet below loads the Chooser library from Dropbox; replace YOUR-APP-KEY with the key from your app settings. The page includes an empty <div> targeting a custom JavaScript file:

<!DOCTYPE html>
<head>
        <meta charset="UTF-8"/>
        <title>Chooser JS Integration Example</title>
        <script type="text/javascript" 
                src="https://www.dropbox.com/static/api/2/dropins.js" 
                id="dropboxjs" 
                data-app-key="YOUR-APP-KEY">
        </script>
</head>
<body>
        <h1>An Example of a Minimal Integration of Dropbox's Chooser JS</h1>
        <div id="dropboxContainer"></div>
        <script src="custom.js"></script>
</body>
</html>

Next, create custom.js. The Dropbox.createChooseButton() function generates a button based on an options object, and the script inserts it into the target div:

options = {
        success: function(files){
         
        },
        cancel: function(){
                 
        },
};
var button = Dropbox.createChooseButton(options);
document.getElementById("dropboxContainer").appendChild(button);

Run both files through a local web server. Opening them directly in the browser will raise errors. If you're using Node.js, the Express framework works well. Ensure npm is installed, create a server.js with this code, then launch it with node server.js:

var express = require('express');
var app = express();
// use line below if html file is in root directory
app.use(express.static(__dirname));
// use line below if html file is in nested folder
// app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
    res.render('index.html');
});
app.listen(8000)
console.log('Server listening on localhost:8000');

At this point, you have a working button that opens the Dropbox file browser.

Customizing for a Real Use Case

The success callback — empty above — receives an array of files with metadata such as name and link. The full field list is in the Chooser documentation. Some workflows never touch the backend, and don't need to handle raw bytes at all.

Consider an example: letting a user email PDF documents for review. Start with the name and link fields. The revised custom.js below introduces several options:

options = {
        success: function(files){
                send_files(files);
        },
        cancel: function(){
        },
        linkType: "preview",
        multiselect: true,
        extensions:['.pdf'],
};
var button = Dropbox.createChooseButton(options);
document.getElementById("dropboxContainer").appendChild(button);

Options set in this version include:

  • linkType is 'preview', returning a shareable preview link. Choose 'direct' only when sending the file content to a backend.
  • multiselect is true, allowing multiple files at once.
  • extensions restricts choices to .pdf. Add more strings to the array, or remove the property to permit any file type.

The success function now calls send_files(), added to the bottom of the file:

function send_files(files) {
        var subject = "Shared File Links";
        var body = "";
        for(i = 0; i &amp;amp;amp;amp;lt; files.length; i++){
                body += files[i].name + "\n" + files[i].link + "\n\n";
        }
        location.href = 'mailto:[email protected]?Subject='+ escape(subject) + '&amp;amp;amp;amp;amp;body='+ escape(body),'200','200';
}

That function builds an email by iterating over the selected files and constructing a mailto: link. It escapes the subject and body, so all data arrives safely in the local email client.

After restarting the server and reloading the page, users can pick PDFs, and the email opens with names and preview links pre-filled.

Going Further

The Chooser's strength is its flexibility. The same basic flow adapts to many workflows — for example, opening files via window.open() for previews, or processing content directly in the app through a direct link. Wherever you'd normally rely on a standard input field for uploads, Chooser offers a lighter way to pull in users' Dropbox files.

For situations where users should save files back to Dropbox, the Dropbox Saver component handles uploads of any file size. Chooser documentation and the Dropbox API reference cover the full set of options and available fields.