cleaned up ui

Author: Eric W. Greene

README.md

@@ -1,2 +1,11 @@
 # file_uploads
 File Upload Demonstrations using a HTML5 and Node.js.
+
+To run,
+
+1. Clone this repository to your local computer.
+2. Open a terminal, change to the local folder where the repository was cloned to.
+3. Type **npm install**, then press **enter**.
+4. Then either, type **grunt**, and press **enter**. Or, type **node app/index.js**, and press **enter**.
+5. Then open a web browser, and navigate to **http://localhost:8080**
+6. Select a demo, and follow the instructions.

app/www/css/site.css

@@ -3,14 +3,14 @@ footer {
 }
 
 #drop-zone {
-	float:left;
 	width:200px;
 	height:200px;
 	background-color: white;
 	box-sizing: border-box;
 	border: 2px dashed #999999;
+	text-align:center;
 }
 
-#drop-zone .active {
+#drop-zone.active {
 	border: 3px dashed black;
 }

app/www/index_socketio_upload.html

@@ -15,7 +15,14 @@
 			<h1>Drag & Drop Socket IO File Upload Demo</h1>
 		</header>
 
-		<div id="drop-zone">Drop a File Here</div>
+		<main class="row">
+			<div class="col-xs-6">
+				<div id="drop-zone">Drop a File Here</div>
+			</div>
+			<div class="col-xs-6">
+				<pre id="status-log">Status:</pre>
+			</div>
+		</main>
 
 		<footer>
 			<small><a href='http://www.training4developers.com' target='_blank'>

app/www/index_websockets_upload.html

@@ -15,7 +15,14 @@
 			<h1>Drag & Drop Web Socket File Upload Demo</h1>
 		</header>
 
-		<div id="drop-zone">Drop a File Here</div>
+		<main class="row">
+			<div class="col-xs-6">
+				<div id="drop-zone">Drop a File Here</div>
+			</div>
+			<div class="col-xs-6">
+				<pre id="status-log">Status:</pre>
+			</div>
+		</main>
 
 		<footer>
 			<small><a href='http://www.training4developers.com' target='_blank'>

app/www/js/socket_io_file_upload.js

@@ -1,9 +1,16 @@
 (function(document) {
 
-	var socket = io();
+	var socket = io(), statusLog;
 
 	socket.on("upload result", function(result) {
-		console.log(result);
+		statusLog.innerText += result + "\n";
+	});
+
+	document.addEventListener("DOMContentLoaded", function() {
+
+		statusLog = document.getElementById("status-log");
+		statusLog.innerText += "\n";
+
 	});
 
 	document.addEventListener("dragenter", function(e) {
@@ -32,7 +39,7 @@
 				fr = new FileReader();
 
 			fr.addEventListener("loadend", function() {
-				console.log("sending " + fr.result.byteLength + " bytes");
+				statusLog.innerText += "sending " + fr.result.byteLength + " bytes\n";
 				socket.emit("upload file", fr.result);
 			});
 

app/www/js/web_socket_file_upload.js

@@ -1,16 +1,19 @@
 (function(window, document) {
 
-	var socket;
+	var socket, statusLog;
 
 	document.addEventListener("DOMContentLoaded", function() {
 
+		statusLog = document.getElementById("status-log");
+		statusLog.innerText += "\n";
+
 		socket = new WebSocket("ws://localhost:8081");
 		socket.addEventListener("open", function() {
 			console.log("connection open");
 		});
 
 		socket.addEventListener("message", function(msg) {
-			console.log(msg.data);
+			statusLog.innerText += msg.data + "\n";
 		});
 
 	});
@@ -41,7 +44,7 @@
 				fr = new FileReader();
 
 			fr.addEventListener("loadend", function() {
-				console.log("sending " + fr.result.byteLength + " bytes");
+				statusLog.innerText += "sending " + fr.result.byteLength + " bytes" + "\n";
 				socket.send(fr.result);
 			});