<< Back to the blog

HTML5 - FileSystem




By @islamzatary

List of Advanced HTML5 Topics:


FileSystem API.

HTML5 FileSystem: Its a standard way to interact with local files, via the File API specification.
so its allows the creation of files and folders as well as their local storage using JavaScript.

Can i use FileSystem API

FileSystem API.

highlighting the main points:
* Files can be simple text files, but even more complex files such as images are possible.
* the FileSystem-API is only allowed to access a specific protected area on your local drive controlled by the browser.
* It is not possible to access the whole of the local drive.
* There is a permission is requested by opening a tooltip below the URL bar, asking for confirmation.

FileSystem API.

highlighting the main points:
* Chrome allows the use of a maximum of 50% of the available disk space to store files temporarily, with each website limited to using 20% of that space.
* Filling the gap between desktop and web applications even further.
* his API gives web applications controlled access to a private local filesystem "sandbox," in which they can write and read files, create and list directories, and so on.
* Only Google's Chrome & Opera browsers supports the "full" implementation of the Filesystem API.

FileSystem API.

FileSystem API:
1. The asynchronous API(normal app).
2. The synchronous API(reserved for workers).

FileSystem API.

FileSystem API Main Method:
window.requestFileSystem(type, size, successCallback, opt_errorCallback)
Types:
1. PERSISTENT(suitable for web apps that want to store user data permanently).
2. TEMPORARY(appropriate for web apps that want to cache data, but can still operate if the web browser deletes the filesystem).
Size in byts.
Callback function.
errorCallback function.

FileSystem API(Working with files).

Files in the sandboxed environment are represented by the FileEntry interface
A FileEntry contains the types of properties (name, isFile, ...) and methods (remove, moveTo, copyTo, ...) that you'd expect from a standard file system:
fileEntry.isFile - fileEntry.isDirectory
fileEntry.remove()
fileEntry.moveTo() - fileEntry.copyTo()
fileEntry.file()
...

FileSystem API(Creating a file and directory).

Creating Files and Filling Them With Content
getFile() - look up or create a file.
getDirectory() - read or create directories.
copyTo() - duplicating existing entries.
moveTo() - allows you to move or rename a file or directory.

FileSystem API.

Look at a complete example
Demo

FileSystem API.

Filesystem VS Appcache
1. Limitation.
2. Store files and folder hierarchies in the local.
3. add/update/remove individual resources as necessary.

FileSystem API.

Use Cases:
1. Video game, music, or other app with lot of assets.
2. Audio photo editor with offline access.
3. Offline video viewer.
4. Offline mail client (like attachment).

FileSystem API.

Resources:
1. UnderStand FileSystem API 1.
2. Online Demo.
3. Understand Webkit FileSystem API.
4. W3 FileSystem API.
5. Understand Synchronous FileSystem.
6. UnderStand FileSystem API 2.
7. Exploring the FileSystem APIs.

FileSystem API




Wrapping up








<< Back to the blog

by @islamzatary