image-sequencer/lib/imageselect.js

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);

}