My newest browser application "eve-kino" saw its v.0.0.4 release today, and with it the capability of saving and loading session data to and from files on the client machine, without the help of the server. As it turned out, doing this is not that simple in the browser.
Ok, after you know how it is done, it seems simple - but without any reference, it is difficult to find the proper API, especially for saving.
Loading Files
Loading files is actually quite simple, the corresponding API is the FileAPI and works well enough. Since eve-kino is using AngularJS, I needed to go the extra mile to integrate the <input type="file"> element as well. Luckily, I was not the first to try this, so I could reuse the work of others:
- Input Directive: Original here , I adapted it slightly.
- FileReader as service: Turning it to a promise based API from here, my adaptation was interested in the content as text. I like how the callback handler are created by dedicated factory functions, an interesting pattern.
Saving Files
This was the tricky bit. There is no obvious (and currently supported) API that would allow you to have the browser open as "Save As" dialog and then save the file. (The most promising API, FileSaver, is to be deprecated). What I found working right now was the use of an <a> element with the "download" attribute, which seems to be the current way of doing things.
I used these two references to implement my own angular directive, which is a bit specialized for the application right now.
The FileSaver library seems applicable as well, but for now I'll stick with the current implementation.
