Highlight dropzone when dragging

andreimarcu · Oct 1, 2015 · c339a8c · c339a8c
1 parent e3dbbd1
commit c339a8c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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: