How <form.io> uses Dropbox as a file backend for JavaScript apps

Randall Knutson is the Lead Architect at <form.io>, a combined form and API data management platform designed specifically for application developers, addressing complex enterprise workflow applications that require highly-customized roles and permissions, offline mode, integration into multiple 3rd-party and legacy systems, and data analysis and reporting. <form.io> can be deployed as a cloud‐based or on‐site solution, allowing developers to maintain control of their data and back‐end logic.

<form.io> makes it easy to create complex form-based AngularJS and React applications. Many of these apps require file upload and download capability embedded directly within the application. We knew right away that Dropbox was the solution we wanted to to integrate into the <form.io> platform.

Dropbox provides SDKs to integrate with their new API v2 in a variety of languages. However, since the JavaScript SDK is still under development, we wrote our own integration using the HTTP endpoints directly.

Uploading a file to Dropbox

First, we added code to fetch an OAuth 2 access token for using in the Dropbox API calls. You can see the Dropbox OAuth guide for more info about using OAuth with Dropbox.

Note: client-side apps should be careful to only expose the access token to the owner of the token, not others.

Next, we created a file selector field and an onchange event that will upload the file.

Initially we attempted to use both an Angular file upload service and $http directly. However, we found that these send as multipart/form-data which is not what the Dropbox API expects. Instead, the Dropbox API expects the data to be send directly with a type of application/octet-stream.

Now when a user selects a file with the file field it will directly uploaded to Dropbox and a reference to the file can be saved on the server.

Accessing the file within a web app

The file is now stored in Dropbox and a link to the file can be displayed to the users to access the file. However, files stored in Dropbox are not directly accessible like normal web files. Instead, we need to intercept click events on the file link and handle the Dropbox authentication to the file.

Since we are getting the contents of the file directly from Dropbox we needed to intercept the click event, download the contents of the file using the Dropbox API /download endpoint, and save the contents to the user’s computer. We can do this using the new HTML5 Blob constructor and FileSaver, which are now supported on modern browsers.

Using the Dropbox API, <form.io> was able to create a file uploader and a file viewer by accessing the HTTP endpoints directly. Now anyone building a web app on our platform can easily integrate Dropbox as their backend without having to do the hard work themselves.

Feel free to reach out to us at <form.io> if you have any questions or create an account and check out how we implemented the Dropbox API.

Please note: Sometimes we blog about upcoming products or features before they're released, but timing and exact functionality of these features may change from what's shared here. The decision to purchase our services should be made based on features that are currently available.