Output

Sample Code

This demo lists the files/folders in the filesystem.

HTML:

<!DOCTYPE html>
<html>
　<head>
　 <style>
　.example {
　　padding: 10px;
　　border: 1px solid #CCC;
　　}
　#example-list-fs ul {
　　padding-left: 0;
　}
　#example-list-fs li {
　　list-style: none;
　}
　#example-list-fs img {
　vertical-align: middle;
　}
　button {
　　padding: 5px 8px;
　　cursor: pointer;
　　text-shadow: 1px 1px white;
　　font-weight: 700;
　　font-size: 10pt;
　}
</style>
</head>
<body>
<div>This demo lists the files/folders in the filesystem. </div><br>
　　 <div id="example-list-fs" class="example">
　　　　 <button>Add file</button> <button>List file</button> <button>Remove all files</button>
　　　　 <ul id="example-list-fs-ul"></ul>
　　 </div>
　　 <script>
　　　　window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
　　　　var fs = null;

　　　　function errorHandler(e) {
　　　　　　var msg = '';
　　　　　　switch (e.code) {
　　　　　　　　case FileError.QUOTA_EXCEEDED_ERR:
　　　　　　　　　　msg = 'QUOTA_EXCEEDED_ERR';
　　　　　　　　　　break;
　　　　　　　　case FileError.NOT_FOUND_ERR:
　　　　　　　　　　msg = 'NOT_FOUND_ERR';
　　　　　　　　　　break;
　　　　　　　　case FileError.SECURITY_ERR:
　　　　　　　　　　msg = 'SECURITY_ERR';
　　　　　　　　　　break;
　　　　　　　　case FileError.INVALID_MODIFICATION_ERR:
　　　　　　　　　　msg = 'INVALID_MODIFICATION_ERR';
　　　　　　　　　　break;
　　　　　　　　case FileError.INVALID_STATE_ERR:
　　　　　　　　　　msg = 'INVALID_STATE_ERR';
　　　　　　　　　　break;
　　　　　　　　default:
　　　　　　　　　　msg = 'Unknown Error';
　　　　　　　　break;
　　　　　　};
　　　　　　document.querySelector('#example-list-fs-ul').innerHTML = 'Error: ' + msg;
　　　　}

function initFS() {
　　window.requestFileSystem(window.TEMPORARY, 1024*1024, function(filesystem) {
　　　　fs = filesystem;
　　}, errorHandler);
}

var buttons = document.querySelectorAll('#example-list-fs button');
var filelist = document.querySelector('#example-list-fs-ul');

if (buttons.length >= 3) {
　　buttons[0].addEventListener('click', function(e) {
　　if (!fs) {
　　　　return;
}
fs.root.getFile('log.txt', {create: true}, null, errorHandler);
fs.root.getFile('song.mp3', {create: true}, null, errorHandler);
fs.root.getDirectory('mypictures', {create: true}, null, errorHandler);
filelist.innerHTML = 'Files created.';
}, false);

buttons[1].addEventListener('click', function(e) {
if (!fs) {
　　return;
}

var dirReader = fs.root.createReader();
dirReader.readEntries(function(entries) {
if (!entries.length) {
　　filelist.innerHTML = 'Filesystem is empty.';
} else {
　　filelist.innerHTML = '';
}

var fragment = document.createDocumentFragment();
for (var i = 0, entry; entry = entries[i]; ++i) {
　　var img = entry.isDirectory ? '<img src="http://www.html5rocks.com/static/images/tutorials/icon-folder.gif">' :
　　'<img src="http://www.html5rocks.com/static/images/tutorials/icon-file.gif">';
　　var li = document.createElement('li');
　　li.innerHTML = [img, '<span>', entry.name, '</span>'].join('');
　　fragment.appendChild(li);
　　}
　　filelist.appendChild(fragment);
　　}, errorHandler);
}, false);

buttons[2].addEventListener('click', function(e) {
　　if (!fs) {
　　　　return;
　　}

　　var dirReader = fs.root.createReader();
　　dirReader.readEntries(function(entries) {
　　　　for (var i = 0, entry; entry = entries[i]; ++i) {
　　　　　if (entry.isDirectory) {
　　　　　　entry.removeRecursively(function() {}, errorHandler);
　　　　} else {
　　　　　　entry.remove(function() {}, errorHandler);
　　　　}
　　}
　　filelist.innerHTML = 'Directory emptied.';
　　}, errorHandler);
　　}, false);
}

// Initiate filesystem on page load.
if (window.requestFileSystem) {
　　initFS();
}
</script>
</body></html>