Improve interface with simple drag and drop capability

git-svn-id: file:///srv/svn/repo/marisa/trunk@47 d6811dac-2434-b64a-9ddc-f563ab233461

static/dz.js

@@ -0,0 +1,85 @@
+// Handle drag and drop into a dropzone_element div:
+// send the files as a POST request to the server
+"use strict";
+
+// Only start once the DOM tree is ready
+if(document.readyState === "complete") {
+    setupzone();
+} else {
+    document.addEventListener("DOMContentLoaded", setupzone);
+}
+
+function setupzone() {
+    let dropzone = document.getElementById("dropzone");
+    let fileinput = document.getElementById("filebox");
+    let fallbackform = document.getElementById("fallbackform");
+
+    fallbackform.style.display = "none";
+
+    dropzone.className = "dropzone";
+    dropzone.innerHTML = "Click or drop file(s)";
+
+    dropzone.onclick = function() {
+        fileinput.click()
+	return false;
+    }
+
+    dropzone.ondragover = function() {
+        this.className = "dropzone dragover";
+        return false;
+    }
+    
+    dropzone.ondragleave = function() {
+        this.className = "dropzone";
+        return false;
+    }
+
+    dropzone.ondrop = function(e) {
+        // Stop browser from simply opening that was just dropped
+        e.preventDefault();  
+        // Restore original dropzone appearance
+        this.className = "dropzone";
+        sendfiles(e.dataTransfer.files)
+    }
+
+    fileinput.onchange = function(e) {
+        sendfiles(this.files)
+    }
+}
+
+function sendfiles(files) {
+    let uploads = document.getElementById("uploads");
+    let progressbar = document.createElement("progress");
+    let uploadlist = document.createElement("ul");
+    let formData = new FormData(), xhr = new XMLHttpRequest();
+
+    uploads.appendChild(progressbar);
+    uploads.appendChild(uploadlist);
+
+    formData.append("expiry", 10);
+    for(let i=0; i < files.length; i++) {
+        formData.append("file", files[i]);
+    }
+
+    // triggers periodically
+    xhr.upload.onprogress = function(e) {
+        // e.loaded - how many bytes downloaded
+        // e.lengthComputable = true if the server sent Content-Length header
+        // e.total - total number of bytes (if lengthComputable)
+
+    }
+
+    xhr.onreadystatechange = function() {
+        if(xhr.readyState === XMLHttpRequest.DONE) {
+		progressbar.remove();
+		this.response.split(/\r?\n/).forEach(function(link) {
+			let li = document.createElement("li");
+			li.innerHTML = `<a href="${link}">${link}</a>`;
+			uploadlist.appendChild(li);
+		});
+        }
+    }
+
+    xhr.open('POST', window.location.href, true); // async = true
+    xhr.send(formData); 
+}

static/partage.css

@@ -2,9 +2,9 @@ body {
 	padding: 5%;
 	margin: auto;
 	max-width: 540px;
-	text-align: center;
 	font-family: serif;
 	font-size: 1.5rem;
+	text-align: center;
 	background-color: #eeeeee;
 	color: #222222;
 }
@@ -17,10 +17,46 @@ header {
 	align-content: center;
 }
 
+section {
+	display: flex;
+	justify-content: flex-end;
+	font-size: initial;
+}
 
-img#logo { height: 100%; max-height: 30vh; }
-h1 { font-size: 4.5rem; }
-ul { list-style: none; padding: 0; }
+section#formsettings > * {
+	margin-top: 20px;
+	margin-left: 20px;
+}
+
+img#logo {
+	height: 100%;
+	max-height: 30vh;
+}
+
+h1 {
+	font-size: 4.0rem;
+}
+
+ul {
+	list-style: none;
+	text-align: left;
+	display: inline-block;
+}
+
+.dropzone {
+	padding-top: 60px;
+	padding-bottom: 60px;
+	border: 2px dashed #888888;
+	border-radius: 8px;
+	text-align: center;
+	margin: auto;
+	color: #888888;
+}
+
+.dropzone.dragover {
+	color: #222222;
+	border-color: #222222;
+}
 
 /* font attributes are not inherited by default */
 input, input::file-selector-button {
@@ -56,4 +92,3 @@ input, input::file-selector-button {
 		background-color: #222222;
 	}
 }
-

templates/index.html

@@ -14,14 +14,26 @@
 		<img id="logo" src="/partage.png" />
 		<h1>partage</h1>
 	</header>
-	<p>
-		Use the box below to upload and share files. File size is
-		limited to {{.Maxsize}}.
-	</p>
 	<form enctype="multipart/form-data" method="post">
-		<input id="uck" name="uck" type="file" multiple/>
-		<input id="output" name="output" type="hidden" value='html' />
-		<input type="submit" value="...Share"/>
+		<div id="dropzone"></div>
+		<div id="fallbackform" class="dropzone">
+			<input id="filebox" name="file" type="file" multiple/>
+			<input id="output" name="output" type="hidden" value='html' />
+			<input type="submit" value="Upload"/>
+		</div>
+		<section id="formsettings">
+			<label for="expiry"> Destroy after </label>
+			<select id="expiry" name="expiry">
+		                <option value="900"> 15 minutes </option>
+		                <option value="3600"> 1 hour </option>
+		                <option value="28800"> 8 hours </option>
+		                <option value="86400" selected> 1 day </option>
+		                <option value="604800"> 1 week </option>
+			</select>
+		</section>
 	</form>
+	<p>File size limited to {{.Maxsize}}.</p>
+	<div id="uploads"></div>
+	<script src="/dz.js"></script>
 </body>
 </html>