index.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>angular-filesystem testbed</title>
	<script type='text/javascript' src="http://code.angularjs.org/angular-1.0.1.js"></script>
	<script type='text/javascript' src="src/filesystem.js"></script>
	
<script type='text/javascript'>//<![CDATA[ 

angular.module('myApp', ['fileSystem']).controller('MyCtrl', function MyCtrl($scope, $window, $timeout, $q, fileSystem) {
	$scope.messages = ['Click a button'];
	
	var txtFileName = "msg2.txt";
	
	$scope.writeVal = function() {
		fileSystem.writeText(txtFileName, $window.prompt('Enter message to write', 'Hello World')).then(function(fs) {
			$scope.messages.push("data written");
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.readVal = function() {
		fileSystem.readFile(txtFileName).then(function(contents) {
			$scope.messages.push(contents);
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.getUsageInfo = function() {
		fileSystem.getCurrentUsage().then(function(usage) {
			$scope.messages.push(usage.used + " / " + usage.quota);
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.requestIncrease = function() {
		fileSystem.requestQuota(150).then(function(newQuota) {
			$scope.messages.push("New quota: " + (newQuota/1024/1024) + "mb");
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.getFiles = function(dir) {
		fileSystem.getFolderContents(dir).then(function(entries) {
			for(var i = 0; i<entries.length; i++) {
				$scope.messages.push(entries[i].fullPath);
			}
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.deleteFile = function(path) {
		fileSystem.deleteFile(path).then(function() {
			$scope.messages.push(path + " deleted");
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.deleteFolder = function(path, recursive) {
		fileSystem.deleteFolder(path, recursive).then(function() {
			$scope.messages.push(path + " deleted");
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.clearFS = function() {
		fileSystem.getFolderContents('/').then(function(entries) {
			var deletePromises = [];
			
			for(var i = 0; i<entries.length; i++) {
				var p;
				var e = entries[i];
				
				if(e.isDirectory) {
					p = fileSystem.deleteFolder(e.fullPath, true);
				} else {
					p = fileSystem.deleteFile(e.fullPath);
				}
				
				deletePromises.push(p);
			}
			
			return $q.all(deletePromises);
		}).then(function() {
			$scope.messages.push("Filesystem Cleared.");
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.cacheFile = function(url) {
		var filename = url.substr(url.lastIndexOf('/')+1);
		var path = url.substr(0, url.lastIndexOf('/')+1);
		
		var createFolderPromise = fileSystem.createFolder(path);
		
		var xhr =new XMLHttpRequest();
		xhr.open('GET',url,true);
		xhr.responseType ='arraybuffer';
		
		xhr.onload=function(e){
			$timeout(function() {
				createFolderPromise.then(function() {
					return fileSystem.writeArrayBuffer(url, xhr.response, "audio/mpeg");
				}).then(function() {
					$scope.messages.push("Cached file");
				}, function(err) {
					console.log(err);
					$window.alert(err.text);
				});
			});
		};
		
		xhr.send();
	};
	
	$scope.saveFileInput = function() {
		var f = document.querySelector('#fileInput').files[0];
		
		fileSystem.writeFileInput(f.name, f, "text/html").then(function() {
			$scope.messages.push("Copied file to FileSystem");
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
	
	$scope.createFolder = function(path) {
		fileSystem.createFolder(path).then(function(dirEntry) {
			$scope.messages.push(dirEntry.fullPath);
		}, function(err) {
			console.log(err);
			$window.alert(err.text);
		});
	};
});
//]]>
</script>

</head>
<body ng-app="myApp">
	<div ng-controller="MyCtrl" style='display: inline-block; vertical-align: top; width: 60%'>
		<div>
			<button ng-click='writeVal()'>Write to Filesystem</button>
			<button ng-click='readVal()'>Read from Filesystem</button>
			<button ng-click='getUsageInfo()'>Get Usage</button>
			<button ng-click='requestIncrease()'>Request Increase</button>
			<button ng-click='getFiles("/")'>Show File List</button>
			<button ng-click='deleteFile("/msg2.txt")'>Delete File</button>
			<button ng-click='cacheFile("/bumper-board/know.mp3")'>Cache File</button>
			<button ng-click='createFolder("documents/blah/")'>Create Folders</button>
			<button ng-click='deleteFolder("documents/", true)'>Delete Folder</button>
			<button ng-click='clearFS()'>Clear Local Filesystem</button>
		</div>
		<div>
			<input type='file' id='fileInput'/>
			<button ng-click='saveFileInput()'>Save to FS</button>
		</div>
		
		<div ng-repeat="message in messages">{{message}}</div>
	</div>
	
	<div style='display: inline-block; vertical-align: top; width: 35%'>
		<button onclick='document.querySelector("iframe").src+=""'>Reload</button>
		<iframe src='filesystem:http://anthonymaciel.com/persistent/' style="width: 100%; height: 800px; border: none;" />
	</div>
</body>


</html>
