From ea4669b29081b3c6a9809cda310d0e0e107e8c9e Mon Sep 17 00:00:00 2001
From: bill bittner <bittner.w@gmail.com>
Date: Fri, 9 Jun 2017 20:39:07 -0700
Subject: [PATCH] added drag and drop file selection

---
 public/assets/css/style.css       | 11 ++++
 views/index.handlebars            | 85 +++++++++++++++++++++++--------
 views/partials/publish.handlebars | 44 +++++++++-------
 3 files changed, 99 insertions(+), 41 deletions(-)

diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 88ef37b6..dcf255b5 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -1,3 +1,14 @@
+#drop-zone {
+	border: 1px dashed lightgrey;
+	padding: 1em;
+	height: 200px;
+	width: 300px;
+}
+
 .all-claims-img {
 	height: 200px;
+}
+
+#image-preview {
+	display: none;
 }
\ No newline at end of file
diff --git a/views/index.handlebars b/views/index.handlebars
index 3d829ea5..2f7fd6c4 100644
--- a/views/index.handlebars
+++ b/views/index.handlebars
@@ -5,16 +5,20 @@
 {{> publish}}
 {{> links}}
 {{> documentation}}
-{{> bugs}}
 {{> contribute}}
+{{> bugs}}
 
 <script src="/socket.io/socket.io.js"></script>
 <script src="/siofu/client.js"></script>
 <script>
+	// define variables
 	var socket = io();
 	var uploader = new SocketIOFileUpload(socket);
+	var stagedFile = null;
 
-	function createProgressBar(element, size){
+	/* helper functions */
+	// create a progress animation
+	function createProgressBar(element, size){ 
 		var x = 1;
 		var adder = 1;
 		function addOne(){
@@ -33,60 +37,97 @@
 		};
 		setInterval(addOne, 300);
 	}
-
-	function previewFile(){
-		var preview = document.querySelector('img'); //selects the query named img
-		var claimName = document.querySelector('input[name=name]'); 
-		var selectedFile = document.querySelector('input[name=file]').files[0];
+	// preview file and stage the image for upload
+	function previewAndStageFile(selectedFile){ 
+		var preview = document.getElementById('image-preview');
+		var dropzone = document.getElementById('drop-zone');
 		var previewReader = new FileReader();
+
+		preview.style.display = 'block';
+		dropzone.style.display = 'none';
+		
 		previewReader.onloadend = function () {
 			preview.src = previewReader.result;
 		};
+
 		if (selectedFile) {
 			previewReader.readAsDataURL(selectedFile); // reads the data and sets the img src
-			claimName.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
+			document.getElementById('publish-name').value = selectedFile.name.substring(0, selectedFile.name.indexOf('.')); // updates metadata inputs
+			stagedFile = [selectedFile]; // stores the selected file for upload
 		} else {
 			preview.src = '';
 		}
 	}
-
+	// update the publish status
 	function updatePublishStatus(msg){
 		document.getElementById('publish-status').innerHTML = msg;
 	}
+	// process the drop-zone drop
+	function drop_handler(ev) {
+		console.log("drop");
+		ev.preventDefault();
+		// if dropped items aren't files, reject them
+		var dt = ev.dataTransfer;
+		if (dt.items) {
+			if (dt.items[0].kind == 'file') {
+				var droppedFile = dt.items[0].getAsFile();
+				previewAndStageFile(droppedFile);
+			} else {
+				console.log("no files were found")
+			}
+		} else {
+			console.log("no items were found")
+		}
+	}
+	// prevent the browser's default drag behavior
+	function dragover_handler(ev) {
+		ev.preventDefault();
+	}
+	// remove all of the drag data
+	function dragend_handler(ev) {
+		var dt = ev.dataTransfer;
+		if (dt.items) {
+			for (var i = 0; i < dt.items.length; i++) {
+				dt.items.remove(i);
+			}
+		} else {
+			ev.dataTransfer.clearData();
+		}
+	}
 
-	uploader.listenOnSubmit(document.getElementById('publish-submit'), document.getElementById('siofu_input'));
-
+	/* configure the submit button */
 	document.getElementById('publish-submit').addEventListener('click', function(event){
 		event.preventDefault();
+		if (stagedFile) {
+			uploader.submitFiles(stagedFile);
+		};
 	})
-
+	
+	/* socketio-file-upload listeners */
 	uploader.addEventListener('start', function(event){
 		var name = document.getElementById('publish-name').value;
 		var license = document.getElementById('publish-license').value;
 		var nsfw = document.getElementById('publish-nsfw').value;
-		// set meta data 
 		event.file.meta.name = name;
 		event.file.meta.license = license;
 		event.file.meta.nsfw = nsfw;
-		// set the html of the publish area
+		// re-set the html in the publish area
 		document.getElementById('publish').innerHTML = '<div id="publish-status"></div><div id="progress-bar"></div>';
-		// start the progress bar
+		// start a progress animation
 		createProgressBar(document.getElementById('progress-bar'), 12);
 	});
-
 	uploader.addEventListener('progress', function(event){
 		var percent = event.bytesLoaded / event.file.size * 100;
 		updatePublishStatus('File is ' + percent.toFixed(2) + '% loaded to the server');
-	})
+	});
 
+	/* socket.io message listeners */
 	socket.on('publish-status', function(msg){
 		updatePublishStatus(msg);
-	})
-
+	});
 	socket.on('publish-failure', function(msg){
 		document.getElementById('publish').innerHTML = '<p>' + msg + '</p><p> --(✖╭╮✖)→ </p>';
-	})
-
+	});
 	socket.on('publish-complete', function(msg){
 		var publishResults = '<p>Your publish is complete!</p>';
 		publishResults += '<p>Your Claim ID is: ' + msg.result.claim_id + '</p>';
@@ -96,5 +137,5 @@
 		publishResults += '<p><i>NOTE: the transaction still needs to be mined by the network before you can access it! This may take a few minutes. To to view the transaction on the blockchain explorer click the Transaction ID link above.</i></p>';
 		publishResults += '<p><a href="/">Reload to publish another asset</a></p>';
 		document.getElementById('publish').innerHTML = publishResults; 
-	})
+	});
 </script>
diff --git a/views/partials/publish.handlebars b/views/partials/publish.handlebars
index d7385282..bd20d227 100644
--- a/views/partials/publish.handlebars
+++ b/views/partials/publish.handlebars
@@ -1,22 +1,28 @@
 <div id="publish">
 	<h2>Publish Your Own</h2>
-	<form id="publish-form" action="" method="" enctype="multipart/form-data">
-		<input type="file"  id="siofu_input" name="file" accept="video/*,image/*" onchange="previewFile()" enctype="multipart/form-data"/>
-		<br/>
-		<img id="image-preview" src="" height="200" alt="Image preview..."/>
-		<br/>
-		Name: <input type="text" id="publish-name" name="name" value="name"/>
-		<br/>
-		License: <select type="text" id="publish-license" name="license" value="license">
-			<option value="Public Domain">Public Domain</option>
-			<option value="Creative Commons">Creative Commons</option>
-		</select>
-		<br/>
-		NSFW: <select type="text" id="publish-nsfw" name="nsfw" value="false">
-			<option value="false">False</option>
-			<option value="true">True</option>
-		</select>
-		<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
-		<button id="publish-submit">Publish</button>
-	</form>
+	<div id="publish-active-area">
+		<form id="publish-form" action="" method="" enctype="multipart/form-data">
+			<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+				<p>Drag and drop your file here, or choose your file below.</p>
+				
+				<input type="file"  id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+			</div>
+			<img id="image-preview" src="" height="200" alt="Image preview..."/>
+			<br/>
+			Name: <input type="text" id="publish-name" name="name" value="name"/>
+			<br/>
+			License: <select type="text" id="publish-license" name="license" value="license">
+				<option value="Public Domain">Public Domain</option>
+				<option value="Creative Commons">Creative Commons</option>
+			</select>
+			<br/>
+			NSFW: <select type="text" id="publish-nsfw" name="nsfw" value="false">
+				<option value="false">False</option>
+				<option value="true">True</option>
+			</select>
+			<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
+			<button id="publish-submit">Publish</button>
+			<button id="publish-reset">Reset</button>
+		</form>
+	</div>
 </div>
\ No newline at end of file