start

examples/demo.js

@@ -24,5 +24,9 @@ window.onload = function() {
   $('body').on('click', 'button.remove', ui.removeStepUi);
 
   // image selection and drag/drop handling from examples/lib/imageSelection.js
-  setupFileHandling(sequencer);
+  sequencer.setInputStep({
+    dropZoneSelector: "#dropzone",
+    fileInputSelector: "#fileInput",
+    step: sequencer.images.image1.steps[0]
+  });
 };

src/ImageSequencer.js

@@ -220,7 +220,9 @@ ImageSequencer = function ImageSequencer(options) {
     //other functions
     log: log,
     objTypeOf: objTypeOf,
-    copy: copy
+    copy: copy,
+
+    setInputStep: require('./ui/SetInputStep')(sequencer)
   }
 
 }

src/ui/setInputStep.js

@@ -0,0 +1,55 @@
+function setInputStepInit(_sequencer) {
+
+  return function setInputStep(options) {
+
+    var dropzone = $(options.dropZoneSelector);
+    var fileInput = $(fileInputId);
+    step = options.step;
+
+    onLoad = options.onLoad || function onFileReaderLoad() {
+      var loadStep = ;
+      step.output.src = reader.result;
+      _sequencer.run(0);
+      step.options.step.imgElement.src = reader.result;
+    }
+
+    var reader = new FileReader();
+
+    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;
+
+      var reader = new FileReader();
+
+      reader.onload = onLoad;
+
+      reader.readAsDataURL(file);
+    }
+
+    fileInput.on('change', handleFile);
+
+    dropzone[0].addEventListener('drop', handleFile, false);
+
+    dropzone.on('dragover', function onDragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
+    }, false);
+
+    dropzone.on('dragenter', function onDragEnter(e) {
+      dropzone.addClass('hover');
+    });
+
+    dropzone.on('dragleave', function onDragLeave(e) {
+      dropzone.removeClass('hover');
+    });
+
+  }
+
+}
+module.exports = setInputStepInit;