Filesystem API


Filesystem API is a neat method to write/read files and directories to the users sandboxed local file system.

This allows a host of possibilities for offline activity on mobile devices.

This isn’t widly supported at this point so you are looking into the future of web app development.

Currently only supported on Chrome http://caniuse.com/filesystem

A full working Demo is available here

This demo will allow (on Chrome) you to add folders and files to a list, add content to the files and delete any of these later.

All my code is available on github: https://github.com/glynrob/FILEAPI

HTML Code

Simply calling the javascript files required, setting out the structure of the page and stating the manifest file

Javascript

You can look through the full code on github so I will only highlight small parts here

Start:

This attempts to connect to the filesystem and set the quota available to 5MB.

The broswer may request the user to accept offline storage on the first attempt of the page, but will request permission again if you change this value.

typeFileSystem – Can be set to either TEMPORARY or PERSISTENT depending on the uses you require.

Also if the browser does not allow access to the filesystem it is likely due to the browser not supporting this option so you need to alert the user that this code will not work for them.

Add new file or folder:

createFile basically gets the passed in name, creates it and refreshes the directory display.

createFolder is a bit more complex as you need to break up any ‘/’ and have them as seperate folders.

Delete File or Folder:

Both basic methods to delete from the sandbox the name that was provided back.

deleteFolder does have the additional option to replace removeRecursively with remove if you want to not allow the folder to be deleted if there are still files or folders in the subdirectory

Add content to a file:

This gets a bit more complex so I will describe it in more detail

fs.root.getFile – Gets the file. If the file is not found it jumps to the function on line 25 to let the user know this is why.

fileEntry.file(function(file) { –  reads the file provided

reader.onloadend = function(e) { – Once the file has been read, continue

fileEntry.createWriter – Creates the FileWritter object for fileEntry

var blob = new Blob([sentContent], {type: ‘text/plain’}); –  Create a new Blob and set the value to the text provided

fileWriter.write(blob); – write blob to the file

fileWriter.truncate(0); – This removes the existing content before writting the new content, otherwise the text length will never be shorter than previously set.

reader.readAsText(file); – Read the file contents as text

Get all files and Folders:

This simply reads all records in the sandbox for the user and sends that data to a function to handle the HMTL output to the user.

So hopefully this gives you a good idea on how to manage the filesystem API’s for playing with offline storage.

Leave a Reply

Your email address will not be published. Required fields are marked *