diff --git a/examples/demo.css b/examples/demo.css
index ee19c435..53f52764 100644
--- a/examples/demo.css
+++ b/examples/demo.css
@@ -40,6 +40,10 @@ h1 {
color: #444;
}
+.hover {
+ background: #eee;
+}
+
#imageSelect input {
max-width: 100%;
}
diff --git a/examples/index.html b/examples/index.html
index 53cbfa4e..fa050981 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -27,9 +27,9 @@
Image Sequencer
-
-
-
+
+ Open Source by Public Lab
+
@@ -199,8 +199,13 @@
sequencer.removeSteps(index).run();
});
- $('#file').on('change',function(e){
- var file = e.target.files[0];
+ function handleFile(e) {
+
+ e.preventDefault();
+ e.stopPropagation(); // stops the browser from redirecting.
+
+ if (e.target && e.target.files) var file = e.target.files[0];
+ else var file = e.dataTransfer.files[0];
if(!file) return;
reader.onload = function(){
@@ -211,11 +216,31 @@
}
reader.readAsDataURL(file);
+ }
+
+ $('#file').on('change', handleFile);
+
+ var select = $('#imageSelect');
+
+ select[0].addEventListener('drop', handleFile, false);
+
+ select.on('dragover', function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+ }, false);
+
+ select.on('dragenter', function(e) {
+ select.addClass('hover');
});
+
+ select.on('dragleave', function(e) {
+ select.removeClass('hover');
+ });
+
}