Uploading files to Dropbox using javascript for a Single Page App?

Question

I've created a local single page app (web page with embedded javascript to be opened locally with Chrome Browser) and I'd like the ability to upload and download files from my Dropbox account. I've been searching for a solution to do this using javascript, however, I've come on a dead end. There is a javascript Dropbox api (dropbox.js), but it seems you need to use it from a web server (for Dropbox authentication redirection) which I don't think would work for redirecting to a local html file after authentication.

Has anyone done what I'm trying to do, or is it just not doable? If not with Dropbox, is there an alternative (e.g., Google Drive, etc.)?

Thanks.

Answer 1

To authenticate use client.authDriver(new Dropbox.Drivers.Popup()) (see here) instead of a redirect:

This driver may be useful for browser applications that can't handle the redirections peformed by Dropbox.Drivers.Redirect. This driver avoids changing the location of the application's browser window by popping up a separate window, and loading the Dropbox authorization page in that window.

You should be able to read the file locally using a FileReader, then write your file.

---

Update: Yes, you do. See Browser and Open-Source Applications:

The Dropbox API guidelines ask that the API key and secret is never exposed in cleartext. This is an issue for the applications that use dropbox.js on the client side (browser apps and Chrome extensions), as well as all open-source applications.

To meet this requirement, encode your API key.

Answer 2

You can definitely work with Google drive: https://developers.google.com/drive/quickstart-js. There is a sample plunker floating around too. I believe you can work with Skydrive via JS api as well.

Not 100% sure about dropbox, but they use OAuth 1 (Dropbox authentication is compliant with the OAuth v1 specification @ https://www.dropbox.com/developers/core/authentication#python), and its generally not a good idea to use it with JS, as it requires to expose your app secret. Twitter uses same, and they killed their JS api.