JavaScript library for easy integration of cloud storage into an editor

965 views Asked by At

I'm making a client-side-only web application that's a specific type of word processor, so the user will need to save/load files. I'm looking to add a popular cloud storage option (e.g., Dropbox, Drive) that should give these specific features:

  1. Open: Let the user browse their cloud drive and choose a file to open, then give the app the file's contents and metadata.
  2. Save as...: Let the user browse their cloud storage and choose a folder and filename, then take file contents and metadata from the app and store it there.
  3. Save: Do not open a dialog to the user's cloud storage; just take the updated file contents and metadata from the app and save them in the same place as last time.

No file management services need be provided, because the user can use the cloud storage's main web UI for such things.

Main Question: Is there a simple/efficient way to solve this problem? I'm looking to write and maintain as little code as possible. An existing library would be great, but other simple solution methods are also acceptable.

What I've investigated before posting:

  1. I'm currently using a library I wrote that's for in-browser storage only, and I could do a bunch of work to extend it to support cloud APIs, but I'm hoping there's an easier way.
  2. Dropbox provides Chooser and Saver which are super easy to use, but only satisfy requirements 1 and 2, not 3.
  3. Kloudless seems like a great cross-service platform, but I think it, too, handles only requirements 1 and 2, not 3.
  4. Dropbox also provides a full API, but it does not provide dialogs; you have to create the file-browsing UI yourself. Same story for Google Drive.
  5. A ton of other client-side libraries exist for showing beautiful file browser dialogs, but most of them handle all events with AJAX to a server. My app is client-side-only.
1

There are 1 answers

0
Nathan On BEST ANSWER

The solution I ended up with

I ended up creating my own toolkit to solve this problem (on GitHub here). It currently supports only two storage back-ends:

  • in-browser LocalStorage
  • Dropbox in the cloud

It's designed to be easy to add other cloud-storage providers, so pull requests are welcome to help extend it.

What about Kloudless?

I tested Kloudless and confirmed that it does more than I thought it did, but still not enough.

  • It supports "Save" in addition to "Save as...," as one developer explains here.
  • It doesn't let clients send the data as a data URI, but requires the data to exist at a pre-defined URL on the Internet already. So an entirely client-side editor application can't use Kloudless, which therefore doesn't solve my problem.