Drag & Drop plugin: stage 1

examples/playground/index.html

@@ -47,7 +47,7 @@
         </p>
 
         <div id="upload-target">
-          Loading..
+          Drag & Drop here
         </div>
 
       </div>
@@ -64,8 +64,7 @@
 
 </body>
 
-<!-- Include the built js client -->
-<script src="static/transloadit-js-client/transloadit-js-client.js"></script>
+<!-- Include the bundled app.js client -->
 <script src="static/js/app.js"></script>
 
 <!-- Apply the js client on a selector -->

examples/playground/src/js/app.js

@@ -1,12 +1,25 @@
-// import Transloadit from '../../../src/js/core/Transloadit';
-// import DragDrop from '../../../src/js/plugins/DragDrop';
-// import Tus10 from '../../../src/js/plugins/Tus10';
+import Transloadit from '../../../../src/core/Transloadit';
+import DragDrop from '../../../../src/plugins/DragDrop';
+import Tus10 from '../../../../src/plugins/Tus10';
 
 const transloadit = new Transloadit({wait: false});
 const files = transloadit
-  .use(DragDrop, {modal: true})
+  .use(DragDrop, {modal: true, selector: '#upload-target'})
   .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
   .run();
 
 console.log('--> Finished transloadit. Final result: ');
 console.dir(files);
+
+// var Transloadit = require('./src/core/Transloadit.js');
+// var DragDrop = require('./src/plugins/DragDrop.js');
+// var Tus10 = require('./src/plugins/Tus10.js');
+//
+// var transloadit = new Transloadit({wait: false});
+// var files = transloadit
+//   .use(DragDrop, {modal: true})
+//   .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+//   .run();
+//
+// console.log('--> Finished transloadit. Final result: ');
+// console.dir(files);

examples/playground/static/css/style.css

@@ -0,0 +1,12 @@
+#upload-target {
+  width: 300px;
+  /*height: 300px;*/
+  border: 2px dashed;
+  border-color: #ccc;
+  text-align: center;
+  padding: 100px 0;
+}
+
+#upload-target.is-dragover {
+  border-color: #575757;
+}

src/plugins/DragDrop.js

@@ -1,16 +1,77 @@
 import TransloaditPlugin from '../plugins/TransloaditPlugin';
 
+// This is how we roll $('.element').toggleClass in non-jQuery world
+function toggleClass(el, className) {
+  // console.log(el);
+
+  if (el.classList) {
+    el.classList.toggle(className);
+  } else {
+    var classes = el.className.split(' ');
+    var existingIndex = classes.indexOf(className);
+
+    if (existingIndex >= 0) {
+      classes.splice(existingIndex, 1);
+    } else {
+      classes.push(className);
+      el.className = classes.join(' ');
+    }
+  }
+}
+
 export default class DragDrop extends TransloaditPlugin {
   constructor(core, opts) {
     super(core, opts);
     this.type = 'selecter';
+    this.opts = opts;
+    console.log(this.opts);
+
+    // get the element where Drag & Drop event will occur
+    this.dropzone = document.querySelectorAll(this.opts.selector)[0];
+
+    // crazy stuff so that ‘this’ will behave in class
+    this.handleDragEnter = this.handleDragEnter.bind(this);
+    this.handleDragOver = this.handleDragOver.bind(this);
+    this.handleDrop = this.handleDrop.bind(this);
+  }
+
+  listenForEvents() {
+    this.dropzone.addEventListener('dragenter', this.handleDragEnter);
+    this.dropzone.addEventListener('dragover', this.handleDragOver);
+    this.dropzone.addEventListener('drop', this.handleDrop);
+    console.log(`waiting for some files to be dropped on ${this.opts.selector}`);
+  }
+
+  handleDragEnter(e) {
+    event.stopPropagation();
+    event.preventDefault();
+    toggleClass(this.dropzone, 'is-dragover');
+  }
+
+  handleDragOver(e) {
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  handleDrop(e) {
+    console.log('all right, someone dropped something here...');
+    e.preventDefault();
+    toggleClass(this.dropzone, 'is-dragover');
+    const files = e.dataTransfer.files;
+    console.log(files);
+    this.handleFiles(files);
+  }
+
+  handleFiles(files) {
+    return files;
   }
 
   run(files) {
-    this.core.setProgress(this, 0);
-    var selected = [ {name: 'lolcat.jpeg'} ]
-    this.core.setProgress(this, 100);
+    this.listenForEvents();
+    // this.core.setProgress(this, 0);
+    var selected = [ {name: 'lolcat.jpeg'} ];
+    // this.core.setProgress(this, 100);
 
-    return selected;
+    // return selected;
   }
 }

test.js

@@ -1,12 +0,0 @@
-import Transloadit from './src/core/Transloadit';
-import DragDrop from './src/plugins/DragDrop';
-import Tus10 from './src/plugins/Tus10';
-
-const transloadit = new Transloadit({wait: false});
-const files = transloadit
-  .use(DragDrop, {modal: true})
-  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
-  .run();
-
-console.log('--> Finished transloadit. Final result: ');
-console.dir(files);