initial commit

lib/imageselect.js

@@ -0,0 +1,57 @@
+function imageselect(options) {
+
+  // fake jQuery-like DOM selector
+  $ = $ || function $(query){
+    return document.querySelector(query);
+  }
+
+  options = options || {};
+  options.selector = options.selector || "#dropzone";
+  options.output = options.output || function output(image) {
+    return image;
+  }
+
+  var image;
+
+  // CSS UI
+
+  $(options.selector).on('dragenter',function(e) {
+    $(options.selector).addClass('hover');
+  });
+
+  $(options.selector).on('dragleave',function(e) {
+    $(options.selector).removeClass('hover');
+  });
+
+  // Drag & Drop behavior
+
+  var onDrop = function(e) {
+    e.preventDefault();
+    e.stopPropagation(); // stops the browser from redirecting.
+
+    var files = e.dataTransfer.files;
+    for (var i = 0, f; f = files[i]; i++) {
+      // Read the File objects in this FileList.
+
+      reader = new FileReader()
+      reader.onload = function(e) {
+        // we should trigger "load" event here
+
+        // this is done once per image:
+        options.output(event.target.result);
+      }
+      reader.readAsDataURL(f);
+ 
+    }
+  }
+
+  function onDragOver(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+  }
+
+  $(options.selector).on('dragover', onDragOver, false);
+  $(options.selector)[0].addEventListener('drop', onDrop, false);
+
+}