Html5 LocalFileSystem polymer webcomponent

Purpose of this tutorial :

Develop a web component based on polymer and the Html5 Filesystem & FileWriter API.
Sorry but this web component works only on Chrome.

The structure of the main page :

It's a common Html5 page, you will find many templates on the Internet, but to install and use Polymer, the recommended way is to use Bower and Yo because it is incredibly easy.
I also used npm, grunt and Sublime Text to initialize and develop the project.
These tools are not the purpose of this article, so i suggest you consult one of the thousands of tutorials on this subject.

So with Bower,Yo and Polymer Generator we can create an empty page with all Polymer dependencies :

Platform.js is a polyfill, it implements a uniform API for web component on all browsers.

Finally, i chose Bootstrap Twitter (v3.1.1) to create easily a responsive and smart design.

Here is the code :

The wrapper over the Filesystem & FileWriter API :

Filesystem & FileWriter API provides asynchronous methods for reading and writing files to a "sandboxed" file system on the user's local file system.
These api is for the moment only supported by Chrome 18+ with webkit prefix. Check out http://caniuse.com/filesystem.

To simplify the use of these asynchronous API, i created a basic wrapper.
So this wrapper is a dependency for my web component and allows to easily adding, loading and listing files in Html5 file local storage.

Implementation of my web component :

Like all other web component, it's composed in two parts :
- the Javascript behavior
- the template

The Javascript behavior is a very light Javascript code which interact with Polymer and my Filesystem & FileWriter API wrapper.
It uses the Polymer api to register a new element and override life cycle methods (create, ready).
It also declare properties (myfiles, systemOk, systemError ...) and functions (refreshList, openSomeFile, ...) that will be linked in the template.

Here is the code of the Javascript behavior :


The Template allows to bind the data (all existing files) and the actions (crud) with the Html.
It contains several sub-templates to deal with all cases :
- system ko : your browser is not Compatible with Filesystem & FileWriter API.
- empty list
- etc.

If the system is ok, the user can interact with the file local storage to view list of existing files and add, open or delete a file.
Bear in mind that Polymer template uses only properties of Javascript objects, it is indeed not possible to call methods unlike Angularjs.

Here is the code of the template :

Integration of my web component :

To activate my new web component, i just have to import it :
and add the tag anywhere in the page :
For now, none option is available.

---

By adding a bit of html elements (menu etc), here's what it gives :

Play with it :

Here is a screen shot of the web component :

First clic on "Upload a new File in the list"
Chose a file and ok

The list is then refresh with a new element, your file.
You can then add an other, delete ...
Have fun.

Conclusion :

Polymer is a great tool to create advance widget.
It does not replace Angularjs. Without controller, Polymer has not the same target.

The support of Filesystem & FileWriter API in desktop and mobile browsers is really too light for now.
But it's a beginning.

Be careful : Bootstrap must be import before platform to avoid TypeError: Object #