From 0097ccaf345cbc423df415322357e1f574e19140 Mon Sep 17 00:00:00 2001
From: oweissbarth
Date: Sat, 19 Jul 2014 16:17:49 +0200
Subject: added d&d multifile upload

---
 www/browse.php            | 29 ++++++++-------
 www/static/browser.css    | 17 ++++++---
 www/static/dropzone.css   | 51 ++++++++++++++++++++++++++
 www/static/js/browser.js  | 15 +++++++-
 www/static/js/dropzone.js | 91 +++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 185 insertions(+), 18 deletions(-)
 create mode 100644 www/static/dropzone.css
 create mode 100644 www/static/js/dropzone.js

diff --git a/www/browse.php b/www/browse.php
index ee36122..2d7cf05 100644
--- a/www/browse.php
+++ b/www/browse.php
@@ -42,7 +42,9 @@ function browse($content){
 		
 	
 		echo '<link rel="stylesheet" type="text/css" href="/static/browser.css">
-		<script src="/static/js/browser.js"></script>';
+		<link rel="stylesheet" type="text/css" href="/static/dropzone.css">
+		<script src="/static/js/browser.js"></script>
+		<script src=/static/js/dropzone.js></script>';
 		
 		echo get_upload();
 		
@@ -102,22 +104,25 @@ function get_context_menu(){
 
 function get_upload(){
 	return 	'<div id="upload-bg">
+			</div>
 					<div id="upload-area">
 						<h1 class="upload"> Upload </h1>
 						<a onclick="hideUpload()" class="new-folder" id="close">x</a>
-						<form id="upload-form" method="post" action="/'.$_GET["name"]."/".$_GET["folder"].'" enctype="multipart/form-data">
-							<input class="upload-input" id="upload-file" type="file" placeholder="file" name="userfile" size=" 500000000" maxlength="100000000000000" required>
-							<input type="hidden" value="'.$_GET["folder"].'" name="path">
-							<input type="hidden" value="upload" name="task">
-							<label>Public</label><input class="upload-input" type="checkbox" name="share">
-							<input onclick="hide-upload()" type="submit" id="button-input" class="upload-input" value="upload">
-						</form>
-					</div>
-				</div>';
+						<script>var folder=\''.$_GET["folder"].'\'</script>
+						<input type="hidden" value="upload" name="task">
+						<div id="dropzone" ondragover="dragover(event)" ondragleave="dragout(event)" ondrop="drop(event)"><p>Drop files here to upload</p></div>
+						
+						<div id="filelist-wrapper">
+						<table id="filelist">
+						</table>
+						</div>
+						<button onclick="upload()" id="button-input" class="upload-input">upload</button>
+					</div>';
 }
 
 function get_new_folder(){
 	return '<div id="new-folder-bg">
+			</div>
 					<div id="new-folder-area">
 						<h1 class="new-folder"> New Folder </h1>
 						<a onclick="hideNewFolder()" class="new-folder" id="close">x</a>
@@ -126,10 +131,10 @@ function get_new_folder(){
 							<input type="hidden" value="'.$_GET["folder"].'" name="path">
 							<input type="hidden" value="new-folder" name="task">
 							<label>Public</label><input  style="display:inline; margin-left: 5px;" class="new-folder-input" type="checkbox" name="share">
+							<p id="upload-message"></p>
 							<input onclick="hide-new-folder()" type="submit" id="button-input" class="new-folder-input" value="create">
 						</form>
-					</div>
-				</div>';
+					</div>';
 }
 
 
diff --git a/www/static/browser.css b/www/static/browser.css
index 817da0b..fa53a61 100644
--- a/www/static/browser.css
+++ b/www/static/browser.css
@@ -99,9 +99,6 @@ Tools
 	visibility: hidden;
 }
 
-#new-folder-form{
-
-}
 
 
 #new-folder-area{
@@ -117,6 +114,9 @@ Tools
 	margin-left: -200px;
 	
 	border: 1px solid black;
+	z-index: 100;
+	
+	visibility: hidden;
 }
 
 
@@ -161,11 +161,15 @@ input.new-folder-input:focus{
 }
 
 #upload-area{
-	height: 190px;
+	height: 390px;
 	width: 400px;
 	position: fixed;
 	top: 50%;
-	margin-top: -100px;
+	margin-top: -250px;
+	
+	background: white;
+	
+	opacity: 1;
 	
 	padding: 10px;
 	
@@ -173,6 +177,9 @@ input.new-folder-input:focus{
 	margin-left: -200px;
 	
 	border: 1px solid black;
+	z-index: 100;
+	
+	visibility: hidden;
 }
 
 
diff --git a/www/static/dropzone.css b/www/static/dropzone.css
new file mode 100644
index 0000000..7055e6c
--- /dev/null
+++ b/www/static/dropzone.css
@@ -0,0 +1,51 @@
+	#dropzone{
+		width: 400px;
+		height: 150px;
+		border: 1px solid black;
+		text-align: center;
+		display: table;
+		
+
+	}
+	#dropzone p{
+		display: table-cell;
+		color: red;		
+		vertical-align:middle;
+		font-size: 16pt;
+		color: grey;
+	}
+	
+	#filelist tr{
+		background: white;
+		width: 400px;
+	}
+	
+	#filelist tr:nth-child(odd){
+		background: #E6E6FF;
+	}
+	
+	#filelist-wrapper{
+		height: 120px;
+		overflow-y: auto;
+		overflow-x: hidden;
+		margin-top: 10px;
+	}
+	
+	#filelist {
+		width: 400px;
+		
+	}
+	
+	.progressBar{
+		width: 100px;
+		height: 20px;
+	}
+	
+	.progressCol{
+		width: 100px;
+		height: 20px;
+	}
+	
+	.filesize{
+		text-align: right;
+	}
diff --git a/www/static/js/browser.js b/www/static/js/browser.js
index a0e9824..b32154b 100644
--- a/www/static/js/browser.js
+++ b/www/static/js/browser.js
@@ -1,20 +1,33 @@
 
 function showNewFolder(){
 	document.getElementById("new-folder-bg").style.visibility = "visible";
-	
+	document.getElementById("new-folder-area").style.visibility = "visible";
 	return;
 }
 function hideNewFolder(){
 	document.getElementById("new-folder-bg").style.visibility = "hidden";
+	document.getElementById("new-folder-area").style.visibility = "hidden";
 	return;
 }
 
 function showUpload(){
 		document.getElementById("upload-bg").style.visibility = "visible";
+		document.getElementById("upload-area").style.visibility = "visible";
 		return;
 }
 function hideUpload(){
 	document.getElementById("upload-bg").style.visibility = "hidden";
+	document.getElementById("upload-area").style.visibility = "hidden";
+	
+	//clean up
+	vfs_upload_queue = [];
+	var list = document.getElementById("filelist");
+	while(list.firstChild){
+		list.removeChild(list.firstChild);
+	}
+	
+	location.reload(false);
+	
 	return;
 }
 
diff --git a/www/static/js/dropzone.js b/www/static/js/dropzone.js
new file mode 100644
index 0000000..bfc5c1a
--- /dev/null
+++ b/www/static/js/dropzone.js
@@ -0,0 +1,91 @@
+var	vfs_upload_queue = [];
+	function dragover(e){
+		e.preventDefault();
+		var dropzone = document.getElementById("dropzone");
+		dropzone.style.backgroundColor = "#E6E6FF";
+	}
+
+	function dragout(e){
+		var dropzone = document.getElementById("dropzone");
+		dropzone.style.backgroundColor = "white";
+	}
+	
+	function drop(e){
+		e.preventDefault();
+		var dropzone = document.getElementById("dropzone");
+		dropzone.style.backgroundColor = "white";
+		for(file of e.dataTransfer.files){
+			try {
+				reader = new FileReader();
+				reader.readAsBinaryString(file);
+			} catch (NS_ERROR_FILE_ACCESS_DENIED) {
+				//file is a directory. Dropping of directories is only implemented in chrome > v21.
+				alert("file is a directory. Dropping of directories is only implemented in chrome > v21.");
+				break;
+				
+			}
+			var filelist = document.getElementById("filelist");
+			var entry = document.createElement("tr");
+			
+			var filename = document.createElement("td");
+			filename.appendChild(document.createTextNode(file.name));
+			
+			var filesize = document.createElement("td");
+			filesize.appendChild(document.createTextNode(Math.floor(file.size/1024*100)/100+"KB"));
+			filesize.className = "filesize";
+			
+			var progressBar = document.createElement("progress");
+			progressBar.id="progressBar-"+file.name;
+			progressBar.className="progressBar";
+			var progressCol = document.createElement("td");
+			progressCol.className="progressCol";
+			progressCol.appendChild(progressBar);
+			
+			var publicCol = document.createElement("td");
+			var public_at = document.createElement("input");
+			public_at.type = "checkbox";
+			public_at.id = "public-"+file.name; 
+			publicCol.appendChild(public_at);
+			
+			entry.appendChild(filename);
+			entry.appendChild(filesize);
+			entry.appendChild(publicCol);
+			entry.appendChild(progressCol);
+			
+			filelist.appendChild(entry);
+			vfs_upload_queue.push(file);
+		}
+	}
+	
+	function upload(){
+		for(i = 0; i<vfs_upload_queue.length; i++){
+			document.getElementById("progressBar-"+vfs_upload_queue[i].name).value = 0;
+			document.getElementById("progressBar-"+vfs_upload_queue[i].name).max = 100;
+			var xhr = new XMLHttpRequest();
+			
+			xhr.upload.filename = vfs_upload_queue[i].name;
+			
+			xhr.open('post', document.URL, true);
+			var data = new FormData();
+		
+			data.append("userfile", vfs_upload_queue[i]);
+			data.append("task", "upload");
+			if(document.getElementById("public-"+ vfs_upload_queue[i].name).checked){
+				data.append("share", "PUBLIC");
+			}
+				
+			data.append("path", folder);
+			
+			xhr.onreadystatechange=function(){
+				if (xhr.readyState==4 && xhr.status==200){
+					document.getElementById("upload-message").innerHTML = xhr.responseText;
+				}
+			};
+		
+			xhr.upload.addEventListener("progress", function(e){
+				
+				document.getElementById("progressBar-"+this.filename).value = Math.ceil(e.loaded/e.total)*100;
+			});
+			xhr.send(data);
+		}
+	}
-- 
cgit v1.2.3