Browse Source

Highlight dropzone when dragging

pull/23/head v0.6.2
andreimarcu 9 years ago
parent
commit
c339a8c770
  1. 22
      static/js/upload.js
  2. 3
      templates/index.html

22
static/js/upload.js

@ -1,4 +1,25 @@
Dropzone.options.dropzone = { 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) { addedfile: function(file) {
var upload = document.createElement("div"); var upload = document.createElement("div");
upload.className = "upload"; upload.className = "upload";
@ -69,6 +90,7 @@ Dropzone.options.dropzone = {
} }
file.leftElement.style.color = "#E68181"; file.leftElement.style.color = "#E68181";
}, },
maxFilesize: 4096, maxFilesize: 4096,
previewsContainer: "#uploads", previewsContainer: "#uploads",
parallelUploads: 5, parallelUploads: 5,

3
templates/index.html

@ -12,11 +12,10 @@
<input type="submit" value="Upload"> <input type="submit" value="Upload">
</div> </div>
<div class="dz-default dz-message">
<div id="dzone" class="dz-default dz-message">
<span>Click or Drop file(s)</span> <span>Click or Drop file(s)</span>
</div> </div>
<div id="choices"> <div id="choices">
<div id="expiry"> <div id="expiry">
<label>File expiry: <label>File expiry:

Loading…
Cancel
Save