3

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.

Community
  • 1
  • 1
Nathan
  • 1,451
  • 1
  • 15
  • 28
  • 2
    The Dropbox Saver doesn't currently support saving from local sources (e.g., data or blob URIs) but I'll be sure to pass this along as feedback. – Greg Oct 20 '14 at 20:04
  • 1
    @Greg That would make them the easiest way to add storage to a web app! Thanks for considering it. – Nathan Oct 21 '14 at 00:38
  • 1
    FYI - I would add a Dropbox Saver to at least one (possibly more!) of my sites if it had this feature. – James Jan 05 '15 at 23:48
  • doesn't https://github.com/dropbox/dropbox-js/issues/144#issuecomment-32080661 mention that data uri's are added? Or was I reading that thread wrong? – frumbert Oct 05 '15 at 11:13
  • Sounds great! Unfortunately I don't have a minute right now to try it, but as soon as I do, if it works, I'll move your comment into an answer and accept it. Or you can move your comment into an answer yourself for me to accept later, so that you get the reputation for it. – Nathan Oct 30 '15 at 13:42

1 Answers1

2

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.

Nathan
  • 1,451
  • 1
  • 15
  • 28