Browse Source

drag-drop/dashboard: move dropEffect assignment to dragover (#1982)

Updating `dropEffect` on `ondrop` doesn't matter, since the effect will
already have been executed at that point. It should be updated in
ondragenter/ondragover instead.

fixes #1978
Renée Kooi 5 years ago
parent
commit
4179f790e1
2 changed files with 8 additions and 4 deletions
  1. 4 2
      packages/@uppy/dashboard/src/index.js
  2. 4 2
      packages/@uppy/drag-drop/src/index.js

+ 4 - 2
packages/@uppy/dashboard/src/index.js

@@ -522,6 +522,10 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
+    // 1. Add a small (+) icon on drop
+    // (and prevent browsers from interpreting this as files being _moved_ into the browser, https://github.com/transloadit/uppy/issues/1978)
+    event.dataTransfer.dropEffect = 'copy'
+
     clearTimeout(this.removeDragOverClassTimeout)
     this.setPluginState({ isDraggingOver: true })
   }
@@ -541,8 +545,6 @@ module.exports = class Dashboard extends Plugin {
     event.preventDefault()
     event.stopPropagation()
     clearTimeout(this.removeDragOverClassTimeout)
-    // 1. Add a small (+) icon on drop
-    event.dataTransfer.dropEffect = 'copy'
 
     // 2. Remove dragover class
     this.setPluginState({ isDraggingOver: false })

+ 4 - 2
packages/@uppy/drag-drop/src/index.js

@@ -100,8 +100,6 @@ module.exports = class DragDrop extends Plugin {
     event.preventDefault()
     event.stopPropagation()
     clearTimeout(this.removeDragOverClassTimeout)
-    // 1. Add a small (+) icon on drop
-    event.dataTransfer.dropEffect = 'copy'
 
     // 2. Remove dragover class
     this.setPluginState({ isDraggingOver: false })
@@ -121,6 +119,10 @@ module.exports = class DragDrop extends Plugin {
     event.preventDefault()
     event.stopPropagation()
 
+    // 1. Add a small (+) icon on drop
+    // (and prevent browsers from interpreting this as files being _moved_ into the browser, https://github.com/transloadit/uppy/issues/1978)
+    event.dataTransfer.dropEffect = 'copy'
+
     clearTimeout(this.removeDragOverClassTimeout)
     this.setPluginState({ isDraggingOver: true })
   }