silent-drive/client/main.js

var Uploader = {

    roomId: null,
    
    createRoom: function(callback) {
	var self = this;
	$.post('/room', {}, function(response) {
	    callback($.parseJSON(response).id);
	})
    },

    getRoom: function(path,callback) {
	$.getJSON('/room/'+this.roomId+'/'+path, callback)
    },

    getFile: function(fileName, callback) {
	var xhr = new XMLHttpRequest();
	xhr.open('GET', '/room/'+this.roomId+'/'+encodeURIComponent(fileName), true);
	xhr.responseType = 'arraybuffer';
	xhr.onload = callback;
	xhr.send();
    },
    
    deleteRoom: function() {
	$.ajax({
	    type: 'DELETE',
	    url: '/room/'+this.roomId
	})
    },

    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,
            data: formData,
	    success: success,
            cache: false,
            processData: false,
            contentType: false,
            xhr: function () {
                var xhr = new XMLHttpRequest()
		xhr.upload.addEventListener('progress', progress, false)
                return xhr
            },
            type: 'POST'
	});
    },

    createDirectory: function(path, success) {
	$.ajax({
	    url: '/room/mkdir/'+this.roomId,
	    type: 'POST',
	    data: {path: path},
	    success: success
	});
    },
    
    deleteFile: function(id) {
	$.ajax({
	    type: 'DELETE',
	    url: '/room/'+this.roomId+'/'+id
	})
    },
}

var CryptoUploader = {
 
    createRoom: function() {
	Uploader.createRoom(function(roomId){
	    CryptoUtils.initialize()
		.then(function(){
		    window.location = window.location.href+"#"+roomId+","+CryptoUtils.urlSafeKey;
		    window.location.reload();
		})
	});
    },
    
    uploadFile: function() {
	var fileReader = new FileReader();
	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();
	    CryptoUtils.encryptFilename(file.name, Uploader.roomId)
		.then(function(encrypted) {
		    var fileName = encrypted;
		    console.log(self.data);
		    CryptoUtils.encrypt(self.data)
	    		.then(function(encrypted){
			    Uploader.uploadFile(path, fileName, encrypted, self.progress, function(e){
				self.showRoomContent();;
				$("#progress-bar").hide();
			    });
			}).catch(function(err){
			    console.error(err);
			});
		}).catch(function(err){
		    console.error(err);
		});
	};
	fileReader.readAsArrayBuffer(file);
    },

    progress: function(e) {
	if(e.lengthComputable) {
	    $("#progress-bar")
		.prop("value", e.loaded)
		.prop("max", e.total);
	}
    },
	
    downloadFile: function(fileName, fileId) {
	Uploader.getFile(fileId, function(e){
	    if(this.status == 200) {
		CryptoUtils.decrypt(this.response).
		    then(function(decrypted){
			var a = document.createElement("a");
			document.body.appendChild(a);
			a.style = "display: none";
			blob = new Blob([decrypted], {type: "application/octet-binary"}),
			url = window.URL.createObjectURL(blob);
			a.href = url;
			a.download = fileName;
			a.click();
			window.URL.revokeObjectURL(url);
		    }).catch(function(err){
			console.error(err);
		    })
	    }
	})
    },

    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();
	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()) {
		let file = f[1];
		CryptoUtils.decryptFileName(file.name, Uploader.roomId)
		    .then(function(fileName) {
			var fileName = CryptoUtils.arrayBufferToString(fileName);
			var e = $("<li></li>").appendTo("#file-list > ul");
			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(file.name);
				CryptoUploader.showRoomContent();
			    })
			    .addClass("delete-button")
			    .appendTo(e);
			$("#empty-room").hide();
		    }).catch(function(err){
			console.log(f[1]);
			console.error(err);
		    });			
	    }
	});
    },

    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;
	return temp.innerHTML;
    }
}

$(function(){
    if(window.location.hash) {
	var params = window.location.hash.substr(1).split(',');
	var roomId = params.shift();
	var key = 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();
	}).catch(function(err){
	    console.error(err);
	});
    }
    else {
	$("#room").hide();
	$("#create-room > input").show().on('click', function(e){
	    CryptoUploader.createRoom();
	});
    }
})