silent drive has basic directory support

client/index.html

@@ -17,7 +17,8 @@
 	<div id="upload-buttons">
 	  <input id="file-selector" type="file" name="file"/>
 	  <label class="stylish-button" for="file-selector">Upload file</label>
-	  <!-- <input class="stylish-button" id="upload-button" type="button" name="upload" value="Upload"/> -->
+	  <input id="directory-name" type="text" placeholder="Insert directory name here"/>
+	  <input class="stylish-button" id="create-directory-button" type="button" name="upload" value="New Directory"/> 
 	</div>
 	<progress id="progress-bar"></progress>
       </div>

client/main.js

@@ -9,8 +9,8 @@ var Uploader = {
 	})
     },
 
-    getRoom: function(callback) {
-	$.getJSON('/room/'+this.roomId, callback)
+    getRoom: function(path,callback) {
+	$.getJSON('/room/'+this.roomId+'/'+path, callback)
     },
 
     getFile: function(fileName, callback) {
@@ -28,8 +28,9 @@ var Uploader = {
 	})
     },
 
-    uploadFile: function(name, data, progress, success){
+    uploadFile: function(path, name, data, progress, success){
 	var formData = new FormData();
+	formData.append("path", path);
 	formData.append("file", data, name);
 	$.ajax({
 	    url: '/room/'+this.roomId,
@@ -46,6 +47,15 @@ var Uploader = {
             type: 'POST'
 	});
     },
+
+    createDirectory: function(path, success) {
+	$.ajax({
+	    url: '/room/mkdir/'+this.roomId,
+	    type: 'POST',
+	    data: {path: path},
+	    success: success
+	});
+    },
     
     deleteFile: function(id) {
 	$.ajax({
@@ -72,6 +82,8 @@ var CryptoUploader = {
 	var data;
 	var file = document.getElementById("file-selector").files[0];
 	var self = this;
+	var params = window.location.hash.substr(1).split(',');
+	var path = params.length >= 3 ? params[2] : '';
 	fileReader.onload = function(e) {
 	    self.data = fileReader.result;
 	    $("#progress-bar").show();
@@ -81,7 +93,7 @@ var CryptoUploader = {
 		    console.log(self.data);
 		    CryptoUtils.encrypt(self.data)
 	    		.then(function(encrypted){
-			    Uploader.uploadFile(fileName, encrypted, self.progress, function(e){
+			    Uploader.uploadFile(path, fileName, encrypted, self.progress, function(e){
 				self.showRoomContent();;
 				$("#progress-bar").hide();
 			    });
@@ -126,21 +138,47 @@ var CryptoUploader = {
 
     showRoomContent: function() {
 	var self = this;
+	var params = window.location.hash.substr(1).split(',')
+	var path = params.length >= 3 ? params[2] : ''
+	var is_parent = path == ''
 	$("#file-list > ul").empty();
-	Uploader.getRoom(function(data){
+	if(!is_parent) {
+	    var e = $("<li></li>").appendTo("#file-list > ul");
+	    $("<span>⬅️</span> <a>..</a>")
+		.on('click', function(e){
+		    var dirs = path.split('/');
+		    dirs.pop();
+		    params[2] = dirs.join('/')
+		    if(params[2] == '') {
+			params.splice(2,1);
+		    }
+		    console.log(params[2]);
+		    window.location.hash = params.join(',');
+		    CryptoUploader.showRoomContent();
+		}).appendTo(e);
+	}
+	Uploader.getRoom(path, function(data){
 	    for(let f of data.entries()) {
-		CryptoUtils.decryptFileName(f[1], Uploader.roomId)
+		let file = f[1];
+		CryptoUtils.decryptFileName(file.name, Uploader.roomId)
 		    .then(function(fileName) {
-			console.log(fileName);
-			window.nene = fileName;
 			var fileName = CryptoUtils.arrayBufferToString(fileName);
 			var e = $("<li></li>").appendTo("#file-list > ul");
-			$("<a>"+self.sanitizeHTML(fileName)+"</a>")
-			    .on('click', function(e){CryptoUploader.downloadFile(fileName, f[1])})
-			    .appendTo(e);
+			if(file.is_directory) {
+			    $("<span>📁</span> <a>"+CryptoUploader.sanitizeHTML(fileName)+"</a>")
+				.on('click', function(e){
+				    window.location.hash += is_parent ? ",/"+file.name : '/'+file.name;
+				    CryptoUploader.showRoomContent();
+				}).appendTo(e);
+			}
+			else {
+			    $("<span>📄</span> <a>"+CryptoUploader.sanitizeHTML(fileName)+"</a>")
+				.on('click', function(e){CryptoUploader.downloadFile(fileName, file.name)})
+				.appendTo(e);
+			}
 			$("<span>🗑️</span>")
 			    .on('click', function(e){
-				Uploader.deleteFile(f[1]);
+				Uploader.deleteFile(file.name);
 				CryptoUploader.showRoomContent();
 			    })
 			    .addClass("delete-button")
@@ -154,6 +192,27 @@ var CryptoUploader = {
 	});
     },
 
+    createDirectory: function() {
+	var params = window.location.hash.substr(1).split(',')
+	var path = params.length >= 3 ? params[2] : ''
+	var directoryName = $("#directory-name");
+	if(directoryName.css('display') != 'none') {
+	    if(directoryName.val() != '') {
+		CryptoUtils.encryptFilename(directoryName.val(), Uploader.roomId)
+		    .then(function(encrypted) {
+			Uploader.createDirectory(path+'/'+encrypted, CryptoUploader.showRoomContent);
+		    }).catch(function(err) {
+			console.log(err);
+		    });
+		directoryName.val('');
+	    }
+	    directoryName.hide();
+	}
+	else {
+	    directoryName.show();
+	}
+    },
+    
     sanitizeHTML: function (str) {
 	var temp = document.createElement('div');
 	temp.textContent = str;
@@ -166,19 +225,16 @@ $(function(){
 	var params = window.location.hash.substr(1).split(',');
 	var roomId = params.shift();
 	var key = params.shift();
-	var file = params.shift();
 	$("#create-room").hide();
 	$("#room").show();
 	$("#progress-bar").hide();
+	$("#create-directory-button").on('click', CryptoUploader.createDirectory);
 	Uploader.roomId = roomId;
 	CryptoUtils.initialize(key).then(function(){
 	    $("#file-selector").on('input', function(){
 		CryptoUploader.uploadFile();
 	    });
 	    CryptoUploader.showRoomContent();
-	    if(file !== undefined) {
-		CryptoUploader.downloadFile(file);
-	    }
 	}).catch(function(err){
 	    console.error(err);
 	});

client/style.css

@@ -7,6 +7,15 @@ body {
   background-color: #ec567c;
 }
 
+#directory-name {
+	color: #ccc;
+	padding: 1% 2%;
+	background-color: #363636;
+	border-radius: 3px;
+	border: 1px solid #bbb;
+	display: none;
+}
+
 .stylish-button {
     background-color: #ec567c;
     margin: 0;