Stop task dragging from looking like file upload

noahheck · Feb 7, 2021 · ffb400d · ffb400d
1 parent 8d9d4e4
commit ffb400d
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 3 deletions.
diff --git a/public/js/app.js b/public/js/app.js
@@ -31198,6 +31198,24 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 
 var $ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
+/**
+ * We use this to determine if the drag event is being initiated by dragging an element present on the HTML page. Files
+ * dragged in from the OS don't fire the 'dragstart' or 'dragend' events, so we know if these events are fired, they
+ * originate from within the page and aren't a file being dragged in for upload
+ * @type {boolean}
+ */
+
+
+var browserDrag = false;
+window.addEventListener('dragstart', function (e) {
+  browserDrag = true;
+}, false);
+window.addEventListener('dragend', function (e) {
+  browserDrag = false;
+}, false);
+window.addEventListener('drop', function (e) {
+  browserDrag = false;
+}, false);
 
 var _default =
 /*#__PURE__*/
@@ -31215,21 +31233,37 @@ function (_Controller) {
     value: function connect() {
       var _this = this;
 
+      // We use dragTimer to remove the dropzone highlight on a timer because dragleave seems to fire continuously in
+      // chromium
+      var dragTimer;
       ['dragenter', 'dragover'].forEach(function (eventName) {
         _this.containerTarget.addEventListener(eventName, function (e) {
+          if (browserDrag) {
+            return;
+          }
+
           _this.highlightDropArea();
 
           e.preventDefault();
+          window.clearTimeout(dragTimer);
         }, false);
       });
       ['dragleave'].forEach(function (eventName) {
         _this.containerTarget.addEventListener(eventName, function (e) {
-          _this.unHighlightDropArea();
+          dragTimer = setTimeout(function (e) {
+            _this.unHighlightDropArea();
+          }, 25);
         }, false);
       });
       this.containerTarget.addEventListener("drop", function (e) {
         e.preventDefault();
 
+        if (!e.dataTransfer.files.length) {
+          _this.unHighlightDropArea();
+
+          return;
+        }
+
         _this.showUploadingIndicator();
 
         _this.acceptFiles(e.dataTransfer.files);

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=51f4cef13d4f4b0fe752",
+    "/js/app.js": "/js/app.js?id=6928f140276e7f914515",
     "/css/manual.css": "/css/manual.css?id=c5c356049bac3a40a57b",
     "/css/auth.css": "/css/auth.css?id=b165500c56b347a53a44",
     "/css/app.css": "/css/app.css?id=11d6fe48ef0cea6549c1",

diff --git a/resources/js/controllers/drag-drop-file-upload_controller.js b/resources/js/controllers/drag-drop-file-upload_controller.js
@@ -6,28 +6,74 @@ import { Controller } from "stimulus"
 
 let $ = require('jquery');
 
+
+/**
+ * We use this to determine if the drag event is being initiated by dragging an element present on the HTML page. Files
+ * dragged in from the OS don't fire the 'dragstart' or 'dragend' events, so we know if these events are fired, they
+ * originate from within the page and aren't a file being dragged in for upload
+ * @type {boolean}
+ */
+let browserDrag = false
+
+window.addEventListener('dragstart', (e) => {
+    browserDrag = true;
+}, false);
+
+window.addEventListener('dragend', (e) => {
+    browserDrag = false;
+}, false);
+
+window.addEventListener('drop', (e) => {
+    browserDrag = false;
+}, false);
+
+
 export default class extends Controller {
 
     static get targets () {
         return [ "container", "form", "input" ];
     }
 
     connect() {
+
+        // We use dragTimer to remove the dropzone highlight on a timer because dragleave seems to fire continuously in
+        // chromium
+        let dragTimer;
+
         ['dragenter', 'dragover'].forEach(eventName => {
             this.containerTarget.addEventListener(eventName, (e) => {
+
+                if (browserDrag) {
+
+                    return;
+                }
+
                 this.highlightDropArea();
                 e.preventDefault();
+
+                window.clearTimeout(dragTimer);
             }, false)
         });
 
         ['dragleave'].forEach(eventName => {
             this.containerTarget.addEventListener(eventName, (e) => {
-                this.unHighlightDropArea();
+
+                dragTimer = setTimeout((e) => {
+                    this.unHighlightDropArea();
+
+                }, 25);
             }, false)
         });
 
         this.containerTarget.addEventListener("drop", (e) => {
             e.preventDefault();
+
+            if (!e.dataTransfer.files.length) {
+                this.unHighlightDropArea();
+
+                return;
+            }
+
             this.showUploadingIndicator();
 
             this.acceptFiles(e.dataTransfer.files);