File upload from a web browser can be a hassle for both the developer and the end user. By integrating with Dropbox, you can help your users easily get to their files stored in Dropbox and streamline uploads into your app without the need for error handling or multipart form data with backend code.
The Dropbox Chooser is an easy-to-implement, pre-built component that allows users to access their Dropbox files from within your app. Simply include our JavaScript snippet to add a file-browsing UI and handle authentication to a users’ Dropbox account. This post will cover the three simple steps to add Dropbox Chooser to your website or application.
Step 1: Create Your Dropbox App
Step 2: Integrate the Chooser into your App
With our Dropbox app prepared, we’re ready to add Chooser into our website or app. For this example, we’ll use some basic HTML and JavaScript to show what’s possible. You can also access basic Chooser set up instructions on the Dropbox developer website.
To get started, copy and paste this boilerplate into a new HTML 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>There are a couple things to note here. First, the tag loads the Chooser from Dropbox. Be sure to replace YOUR-APP-KEY with the app key you grabbed from the App Settings page in the previous step. We also have an empty and a call to a custom JavaScript file. We need to create that file (custom.js) and connect the to Chooser.
Again, here’s some boilerplate JavaScript. Copy it into a new file named `custom.js`:
options = {
success: function(files){
},
cancel: function(){
},
};
var button = Dropbox.createChooseButton(options);
document.getElementById("dropboxContainer").appendChild(button);Here we create a new button by calling Dropbox’s createChooseButton function. We’ve passed a very basic options variable, which we’ll improve upon later. Next, we insert the button into the page by referencing the <div> in our HTML.
Save your files in the same directory and load them up using a local web server of your choice; you will receive errors if you try to load them directly in your browser.
Here is an example using express, a lightweight web framework for Node.js:
- Run in your terminal.
* You’ll need npm (node package manager) to use this particular sample. - Create a ‘server.js’ file and add the following code:
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');3. Run your server with a node server.js command.
You’ll have a page with a simple button that browses Dropbox files with very minimal code. In the next step, we’ll do something with the selected files.
Step 3: Customize Chooser to Your Needs
Dropbox Chooser is meant to support multiple use cases where you might otherwise need a direct file upload. However, since you don’t have to handle the bytes directly, some uses won’t even need a back-end at all. Your success function (empty in our previous example) will get an array of files, each with data about the file, such as the name and link. See the Chooser documentation for the full list of available fields.
For this example, we’ll help users email PDF documents for others to review. This could be integrated as a lightweight publishing step within a workflow, where co-workers, or others involved with the project, would receive the email with preview links. To do this, we will only need the name and link fields.
To ensure this process is smooth, we will modify our options parameter by including several fields, as well as adding some code to the success function. Replace the previous `custom.js` file with the following JavaScript:
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);We’ve set the linkType to preview to provide the user a preview link to the document for sharing. While this approach is useful for an end user, you’ll want to use the direct option if you intend to transfer the file to a backend.
There are a couple of other Chooser options we’re using. First, we set the multiselect field to true, which allows users to choose more than one file. Secondly, we limited our extensions to .pdf only—you can include multiple extensions as strings in the array, or remove the option to allow any file type.
The success function now calls to another function, send_files(), which will process the PDFs the user selects in the Chooser interface. Add this additional JavaScript to the bottom of your `custom.js` file:
function send_files(files) {
var subject = "Shared File Links";
var body = "";
for(i = 0; i &amp;amp;amp;lt; files.length; i++){
body += files[i].name + "\n" + files[i].link + "\n\n";
}
location.href = 'mailto:coworker@example.com?Subject='+ escape(subject) + '&amp;amp;amp;amp;body='+ escape(body),'200','200';
}Our JavaScript function first sets a subject for the email, which we’ll use to send the links to the user’s PDF files. The for loop goes through all the files from the Chooser, getting the name of the file and the link to the file on Dropbox. Finally, we construct the mailto link (note the email address), being sure to escape the subject and body so all the data will make its way to our local email program.
Restart your localhost server and load up the HTML file in your browser. After choosing files, you’ll be ready to send the email, with the links pre-filled into the body of your message.
Potential Enhancements
