From c339a8c7706f5dc10cf557ab3040fac41063532b Mon Sep 17 00:00:00 2001
From: andreimarcu <andrei@marcu.net>
Date: Thu, 1 Oct 2015 12:46:34 -0400
Subject: [PATCH] Highlight dropzone when dragging

---
 static/js/upload.js  | 22 ++++++++++++++++++++++
 templates/index.html |  3 +--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/static/js/upload.js b/static/js/upload.js
index df820b8..52368d2 100644
--- a/static/js/upload.js
+++ b/static/js/upload.js
@@ -1,4 +1,25 @@
 Dropzone.options.dropzone = {
+	init: function() {
+		this.dzone = document.getElementById("dzone");
+		this.on("drop", function(ev) {
+			this.dzone.style.backgroundColor = "#FAFBFC";
+		});
+		this.on("dragstart", function(ev) {
+			this.dzone.style.backgroundColor = "#2c89f0";
+		});
+		this.on("dragend", function(ev) {
+			this.dzone.style.backgroundColor = "#FAFBFC";
+		});
+		this.on("dragenter", function(ev) {
+			this.dzone.style.backgroundColor = "#2c89f0";
+		});
+		this.on("dragover", function(ev) {
+			this.dzone.style.backgroundColor = "#2c89f0";
+		});
+		this.on("dragleave", function(ev) {
+			this.dzone.style.backgroundColor = "#FAFBFC";
+		});
+	},
 	addedfile: function(file) {
 		var upload = document.createElement("div");
 		upload.className = "upload";
@@ -69,6 +90,7 @@ Dropzone.options.dropzone = {
 		}
 		file.leftElement.style.color = "#E68181";
 	},
+
     maxFilesize: 4096,
 	previewsContainer: "#uploads",
 	parallelUploads: 5,
diff --git a/templates/index.html b/templates/index.html
index 7a1c434..8195f6e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,11 +12,10 @@
             <input type="submit" value="Upload">
         </div>
 
-        <div class="dz-default dz-message">
+        <div id="dzone" class="dz-default dz-message">
             <span>Click or Drop file(s)</span>
         </div>
 
-
         <div id="choices">
             <div id="expiry">
                 <label>File expiry: