Fallbacks, new jQuery-like functions in Utils, styles

examples/playground/index.html

@@ -46,11 +46,11 @@
           and online.
         </p>
 
-        <form id="upload-target" class="uppyDragDrop" method="post" action="/" enctype="multipart/form-data">
+        <form id="upload-target" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
           <div>
-            <input class="UppyDragDrop-file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
-            <label class="UppyDragDrop-label" for="UppyDragDrop-file"><strong>Choose a file</strong><span class="UppyDragDrop-drag"> or drag it here</span>.</label>
-            <button class="UppyDragDrop-btn" type="submit">Upload</button>
+            <input id="UppyDragDrop-input" class="UppyDragDrop-input" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple />
+            <label class="UppyDragDrop-label" for="UppyDragDrop-input"><strong>Choose a file</strong><span class="UppyDragDrop-dragText"> or drag it here</span>.</label>
+            <!-- <button class="UppyDragDrop-btn" type="submit">Upload</button> -->
           </div>
           <div class="UppyDragDrop-status">Uploading&hellip;</div>
         </form>

examples/playground/static/css/style.css

@@ -1,12 +1,39 @@
-#upload-target {
+.UppyDragDrop {
   width: 300px;
-  /*height: 300px;*/
+  /*height: 200px;*/
+  text-align: center;
+  /*background-color: #f6fbfb;*/
+  padding: 100px 10px;
+}
+
+/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
+.UppyDragDrop-input {
+  width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.UppyDragDrop.is-dragdrop-supported {
   border: 2px dashed;
   border-color: #ccc;
-  text-align: center;
-  padding: 100px 0;
 }
 
-#upload-target.is-dragover {
-  border-color: #575757;
+.UppyDragDrop-label {
+  cursor: pointer;
+}
+
+.UppyDragDrop-dragText {
+  display: none;
+}
+
+.is-dragdrop-supported .UppyDragDrop-dragText {
+  display: inline;
+}
+
+.UppyDragDrop.is-dragover {
+  border-color: #d2ecea;
+  background-color: #dbf5f3;
 }

src/core/Utils.js

@@ -1,7 +1,5 @@
 // This is how we roll $('.element').toggleClass in non-jQuery world
 export function toggleClass(el, className) {
-  // console.log(el);
-
   if (el.classList) {
     el.classList.toggle(className);
   } else {
@@ -16,3 +14,28 @@ export function toggleClass(el, className) {
     }
   }
 }
+
+export function addClass(el, className) {
+  if (el.classList) {
+    el.classList.add(className);
+  } else {
+    el.className += ' ' + className;
+  }
+}
+
+export function removeClass(el, className) {
+  console.log(el);
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+  }
+}
+
+// $form.on('drag dragstart dragend dragover dragenter dragleave drop');
+export function addListenerMulti(el, events, func) {
+  const eventsArray = events.split(' ');
+  for (let event in eventsArray) {
+    el.addEventListener(eventsArray[event], func, false);
+  }
+}

src/plugins/DragDrop.js

@@ -1,6 +1,5 @@
-import { toggleClass } from '../core/Utils';
+import { toggleClass, addClass, removeClass, addListenerMulti } from '../core/Utils';
 import TransloaditPlugin from './TransloaditPlugin';
-console.log('pizza', TransloaditPlugin);
 
 export default class DragDrop extends TransloaditPlugin {
   constructor(core, opts) {
@@ -13,8 +12,8 @@ export default class DragDrop extends TransloaditPlugin {
     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.listenForEvents = this.listenForEvents.bind(this);
+    // this.toggleDragoverState = this.toggleDragoverState.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
     this.checkDragDropSupport = this.checkDragDropSupport(this);
   }
@@ -29,30 +28,42 @@ export default class DragDrop extends TransloaditPlugin {
   }
 
   listenForEvents() {
-    this.dropzone.addEventListener('dragenter', this.handleDragEnter);
-    this.dropzone.addEventListener('dragover', this.handleDragOver);
+    if (this.isDragDropSupported) {
+      addClass(this.dropzone, 'is-dragdrop-supported');
+    }
+
+    // prevent default actions for all drag & drop events
+    addListenerMulti(this.dropzone, 'drag dragstart dragend dragover dragenter dragleave drop', (e) => {
+      // console.log('yo!');
+      e.preventDefault();
+      e.stopPropagation();
+    });
+
+    // Toggle is-dragover state when files are dragged over or dropped
+    addListenerMulti(this.dropzone, 'dragover dragenter', () => {
+      addClass(this.dropzone, 'is-dragover');
+    });
+
+    addListenerMulti(this.dropzone, 'dragleave dragend drop', () => {
+      removeClass(this.dropzone, 'is-dragover');
+    });
+
     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');
+    console.log(`waiting for some files to be dropped on ${this.opts.selector}`);
   }
 
-  handleDragOver(e) {
-    e.stopPropagation();
-    e.preventDefault();
-  }
+  // Toggle is-dragover state when files are dragged over or dropped
+  // in this case — add/remove 'is-dragover' class
+  // toggleDragoverState(e) {
+  //   toggleClass(this.dropzone, 'is-dragover');
+  // }
 
   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);
+    // this.handleFiles(files);
   }
 
   handleFiles(files) {
@@ -65,6 +76,7 @@ export default class DragDrop extends TransloaditPlugin {
       files : files,
       done  : done
     });
+
     console.log('DragDrop running!');
     // console.log(files);
     this.listenForEvents();