Can Dropbox Saver accept data from createObjectURL()?

Question

The Dropbox Chooser and Saver tools seem very cool for these two tasks:

• Let the user pick a file from their Dropbox, and the page can download it (i.e., Dropbox-to-client).
• Let the user choose a destination in their Dropbox to which to save a file sitting at some URL on a server (i.e., server-to-Dropbox).

That's asymmetrical. This StackOverflow question asks if it's possible to send a file to Dropbox Saver directly from the client. (This is especially handy if one is writing a client-side-only app, wanting Dropbox to stand in for the server.)

A comment in one answer says that the Core API or Sync API can do so. But it would be a shame to introduce those more complex APIs if not needed; Chooser and Saver are delightfully easy-to-use. Furthermore, it's not clear to me whether the UI provided by the Saver would still be available in that case.

My question: What's the easiest way to save a file from the client (e.g., from data in a createObjectURL URL) into the user's Dropbox, still using the Saver UI if possible? (By "easiest" I mean brief, easy-to-read-and-maintain code.) Specific JavaScript code would be ideal.

Answer 1

As in James Foster's comment above, Dropbox now accepts data URIs. Consequently, if one has the data in the form of a data URI, one can call Dropbox.save(dataURI,filename,options) as documented here.

But there is a slight problem: To create a data URI the usual way (with FileReader) requires an asynchronous call to readAsDataURL. But Dropbox.save() can only be called in response to a user interaction (such as a click). So in a click handler, if you must first create the data URI asynchronously, then by the time you get to the callback, the Dropbox.save() function can no longer be called.

In my case, it was possible to create the data URI without the FileReader API, since I was only storing HTML data. One can simply write "data:text/html,"+encodeURIComponent(myHTMLData) to create the data URI, as documented here. For non-text data that solution will not work, and you'd have to try something more complicated, perhaps like what's documented here.