Feature/replace dnd in drag drop package (#1565)

* /examples/dev - added drag-drop plugin dev environment * @uppy/drag-drop - moved isDragDropSupported() to @uppy/utils * @uppy/drag-drop - got rid of drag-drop npm library * examples/dev - made compiled files placed in /output instead of /lib * ~/examples/dev - made watchify only watch files once * @uppy/drag-drop - add onPaste * /examples/dev - readded html css override-attempts * @uppy/drag-drop - made whole area clickable, and made it accessible * @uppy/drag-drop - removed excessive outline in firefox * REVERTED last 2 commits
2026-07-17 16:50:22 +00:00 · 2019-06-05 19:04:34 +05:00 · 2019-06-05 19:04:34 +05:00 · 8be2004826
commit 8be2004826
parent 9edb35fa40
18 changed files with 313 additions and 237 deletions
--- a/.gitignore
+++ b/.gitignore
@ -26,7 +26,7 @@ uppy-*.tgz
 .eslintcache
 .cache

-output/*
+**/output/*
 !output/.keep
 examples/dev/file.txt
 issues.txt
--- a/examples/dev/Dashboard.html
+++ b/examples/dev/Dashboard.html
@ -3,9 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>uppy</title>
-  </head>
-  <body>
+    <title>Dashboard</title>
    <style>
      main {
        padding-top: 100px;
@ -18,10 +16,6 @@
        margin: auto;
      }

-      a {
-        color: purple;
-      }
-
      button,
      input {
        color: green;
@ -30,21 +24,24 @@
        border: 2px solid purple;
      }

+      /* css to make sure that Dashboard's css overrides page css */
      ul {
        margin: 60px;
      }
-
      li {
        margin: 60px;
      }
-
-      .foo a {
+      a {
        color: purple;
      }
    </style>
-    <main class="foo">
-      <h1>Uppy is here</h1>
+  </head>

+  <body>
+    <main class="foo">
+      <h1>Dashboard is here</h1>
+
+      <!-- some inputs in a form to check focus management in Dashboard -->
      <form id="upload-form" action="/">
        <button type="button" id="pick-files">Pick Files</button><br>
        True ? <input type="checkbox" name="check_test" value="1" checked><br>
@ -55,6 +52,6 @@
    </main>

    <link href="uppy.min.css" rel="stylesheet">
-    <script src="bundle.js"></script>
+    <script src="output/index.js"></script>
  </body>
 </html>
--- a/examples/dev/Dashboard.js
+++ b/examples/dev/Dashboard.js
@ -0,0 +1,70 @@
+const Uppy = require('@uppy/core/src')
+const Dashboard = require('@uppy/dashboard/src')
+const Instagram = require('@uppy/instagram/src')
+const Dropbox = require('@uppy/dropbox/src')
+const GoogleDrive = require('@uppy/google-drive/src')
+const Url = require('@uppy/url/src')
+const Webcam = require('@uppy/webcam/src')
+const Tus = require('@uppy/tus/src')
+// const XHRUpload = require('@uppy/xhr-upload/src')
+const Form = require('@uppy/form/src')
+
+const TUS_ENDPOINT = 'https://master.tus.io/files/'
+// const XHR_ENDPOINT = 'https://api2.transloadit.com'
+
+module.exports = () => {
+  const uppyDashboard = Uppy({
+    debug: true,
+    meta: {
+      username: 'John',
+      license: 'Creative Commons'
+    }
+  })
+    .use(Dashboard, {
+      trigger: '#pick-files',
+      // inline: true,
+      target: '.foo',
+      metaFields: [
+        { id: 'license', name: 'License', placeholder: 'specify license' },
+        { id: 'caption', name: 'Caption', placeholder: 'add caption' }
+      ],
+      showProgressDetails: true,
+      proudlyDisplayPoweredByUppy: true,
+      note: '2 files, images and video only'
+    })
+    .use(GoogleDrive, { target: Dashboard, companionUrl: 'http://localhost:3020' })
+    .use(Instagram, { target: Dashboard, companionUrl: 'http://localhost:3020' })
+    .use(Dropbox, { target: Dashboard, companionUrl: 'http://localhost:3020' })
+    .use(Url, { target: Dashboard, companionUrl: 'http://localhost:3020' })
+    .use(Webcam, { target: Dashboard })
+    .use(Tus, { endpoint: TUS_ENDPOINT })
+    // .use(XHRUpload, { endpoint: XHR_ENDPOINT })
+    .use(Form, { target: '#upload-form' })
+    // .use(GoldenRetriever, {serviceWorker: true})
+
+  uppyDashboard.on('complete', (result) => {
+    if (result.failed.length === 0) {
+      console.log('Upload successful 😀')
+    } else {
+      console.warn('Upload failed 😞')
+    }
+    console.log('successful files:', result.successful)
+    console.log('failed files:', result.failed)
+  })
+
+  const modalTrigger = document.querySelector('#pick-files')
+  if (modalTrigger) modalTrigger.click()
+
+  /* eslint-disable compat/compat */
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker
+      .register('/sw.js')
+      .then((registration) => {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope)
+      })
+      .catch((error) => {
+        console.log('Registration failed with ' + error)
+      })
+  }
+  /* eslint-enable */
+}
--- a/examples/dev/DragDrop.html
+++ b/examples/dev/DragDrop.html
@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Drag-Drop</title>
+  </head>
+  <body>
+    <style>
+      main {
+        text-align: center;
+        margin: 20px auto;
+        width: 400px;
+      }
+    </style>
+    <main class="foo">
+      <h1>Drag-drop is here</h1>
+      <div id="uppyDragDrop"></div>
+      <div id="uppyDragDrop-progress"></div>
+    </main>
+
+    <link href="uppy.min.css" rel="stylesheet">
+    <script src="output/index.js"></script>
+  </body>
+</html>
--- a/examples/dev/DragDrop.js
+++ b/examples/dev/DragDrop.js
@ -0,0 +1,27 @@
+const Uppy = require('@uppy/core/src')
+const Tus = require('@uppy/tus/src')
+
+const DragDrop = require('@uppy/drag-drop/src')
+const ProgressBar = require('@uppy/progress-bar/src')
+
+module.exports = () => {
+  const uppyDragDrop = Uppy({
+    debug: true,
+    autoProceed: true
+  })
+    .use(DragDrop, {
+      target: '#uppyDragDrop'
+    })
+    .use(ProgressBar, { target: '#uppyDragDrop-progress', hideAfterFinish: false })
+    .use(Tus, { endpoint: 'https://master.tus.io/files/' })
+
+  uppyDragDrop.on('complete', (result) => {
+    if (result.failed.length === 0) {
+      console.log('Upload successful 😀')
+    } else {
+      console.warn('Upload failed 😞')
+    }
+    console.log('successful files:', result.successful)
+    console.log('failed files:', result.failed)
+  })
+}
--- a/examples/dev/index.js
+++ b/examples/dev/index.js
@ -0,0 +1,8 @@
+const DragDrop = require('./DragDrop.js')
+const Dashboard = require('./Dashboard.js')
+
+switch (window.location.pathname.toLowerCase()) {
+  case '/':
+  case '/dashboard.html': Dashboard(); break
+  case '/dragdrop.html': DragDrop(); break
+}
--- a/examples/dev/main.js
+++ b/examples/dev/main.js
@ -1,68 +0,0 @@
-const Uppy = require('./../../packages/@uppy/core/src')
-const Dashboard = require('./../../packages/@uppy/dashboard/src')
-const Instagram = require('./../../packages/@uppy/instagram/src')
-const Dropbox = require('./../../packages/@uppy/dropbox/src')
-const GoogleDrive = require('./../../packages/@uppy/google-drive/src')
-const Url = require('./../../packages/@uppy/url/src')
-const Webcam = require('./../../packages/@uppy/webcam/src')
-const Tus = require('./../../packages/@uppy/tus/src')
-// const XHRUpload = require('./../../packages/@uppy/xhr-upload/src')
-const Form = require('./../../packages/@uppy/form/src')
-
-const TUS_ENDPOINT = 'https://master.tus.io/files/'
-// const XHR_ENDPOINT = 'https://api2.transloadit.com'
-
-const uppy = Uppy({
-  debug: true,
-  meta: {
-    username: 'John',
-    license: 'Creative Commons'
-  }
-})
-  .use(Dashboard, {
-    trigger: '#pick-files',
-    // inline: true,
-    target: '.foo',
-    metaFields: [
-      { id: 'license', name: 'License', placeholder: 'specify license' },
-      { id: 'caption', name: 'Caption', placeholder: 'add caption' }
-    ],
-    showProgressDetails: true,
-    proudlyDisplayPoweredByUppy: true,
-    note: '2 files, images and video only'
-  })
-  .use(GoogleDrive, { target: Dashboard, companionUrl: 'http://localhost:3020' })
-  .use(Instagram, { target: Dashboard, companionUrl: 'http://localhost:3020' })
-  .use(Dropbox, { target: Dashboard, companionUrl: 'http://localhost:3020' })
-  .use(Url, { target: Dashboard, companionUrl: 'http://localhost:3020' })
-  .use(Webcam, { target: Dashboard })
-  .use(Tus, { endpoint: TUS_ENDPOINT })
-  // .use(XHRUpload, { endpoint: XHR_ENDPOINT })
-  .use(Form, { target: '#upload-form' })
-  // .use(GoldenRetriever, {serviceWorker: true})
-
-uppy.on('complete', (result) => {
-  if (result.failed.length === 0) {
-    console.log('Upload successful 😀')
-  } else {
-    console.warn('Upload failed 😞')
-  }
-  console.log('successful files:', result.successful)
-  console.log('failed files:', result.failed)
-})
-
-/* eslint-disable compat/compat */
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker
-    .register('/sw.js')
-    .then((registration) => {
-      console.log('ServiceWorker registration successful with scope: ', registration.scope)
-    })
-    .catch((error) => {
-      console.log('Registration failed with ' + error)
-    })
-}
-/* eslint-enable */
-
-var modalTrigger = document.querySelector('#pick-files')
-if (modalTrigger) modalTrigger.click()
--- a/examples/dev/output/.empty
+++ b/examples/dev/output/.empty
--- a/examples/dev/package.json
+++ b/examples/dev/package.json
@ -1,10 +1,5 @@
 {
  "name": "uppy-dev-example",
-  "aliasify": {
-    "aliases": {
-      "@uppy": "../../packages/@uppy"
-    }
-  },
  "dependencies": {
    "@babel/core": "^7.4.4",
    "aliasify": "^2.1.0",
@ -13,6 +8,11 @@
  },
  "private": true,
  "scripts": {
-    "watch:sandbox": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify main.js -o bundle.js"
+    "watch:sandbox": "watchify -vd -t [ babelify --cwd ../../ ] -g aliasify index.js -o output/index.js"
+  },
+  "aliasify": {
+    "aliases": {
+      "@uppy": "../../packages/@uppy"
+    }
  }
 }
--- a/package-lock.json
+++ b/package-lock.json
@ -6073,11 +6073,6 @@
      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
    },
-    "blob-to-buffer": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/blob-to-buffer/-/blob-to-buffer-1.2.8.tgz",
-      "integrity": "sha512-re0AIxakF504MgeMtIyJkVcZ8T5aUxtp/QmTMlmjyb3P44E1BEv5x3LATBGApWAJATyXHtkXRD+gWTmeyYLiQA=="
-    },
    "block-stream": {
      "version": "0.0.9",
      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@ -10024,16 +10019,6 @@
      "resolved": "https://registry.npmjs.org/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz",
      "integrity": "sha1-ED01J/0xUo9AGIEwyEHv3XgmTlw="
    },
-    "drag-drop": {
-      "version": "2.13.3",
-      "resolved": "https://registry.npmjs.org/drag-drop/-/drag-drop-2.13.3.tgz",
-      "integrity": "sha512-g+qp+ssi6+v9Qnyyco0dfyA9sYZYYDddGbc0STdMHc9hfyHeYzqGs4v18jFksgHDtYBWf+ocnUkO6jF7MbFudg==",
-      "requires": {
-        "blob-to-buffer": "^1.0.2",
-        "flatten": "^1.0.2",
-        "run-parallel": "^1.0.0"
-      }
-    },
    "dtrace-provider": {
      "version": "0.8.7",
      "resolved": "https://registry.npmjs.org/dtrace-provider/-/dtrace-provider-0.8.7.tgz",
@ -12590,11 +12575,6 @@
      "integrity": "sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==",
      "dev": true
    },
-    "flatten": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
-      "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
-    },
    "flush-write-stream": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@ -12831,21 +12811,21 @@
      "dependencies": {
        "abbrev": {
          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
          "dev": true,
          "optional": true
        },
        "ansi-regex": {
          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "resolved": false,
          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
          "dev": true,
          "optional": true
        },
        "aproba": {
          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+          "resolved": false,
          "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
          "dev": true,
          "optional": true
@ -12863,14 +12843,14 @@
        },
        "balanced-match": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
          "dev": true,
          "optional": true
        },
        "brace-expansion": {
          "version": "1.1.11",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+          "resolved": false,
          "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
          "dev": true,
          "optional": true,
@ -12881,28 +12861,28 @@
        },
        "code-point-at": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
          "dev": true,
          "optional": true
        },
        "concat-map": {
          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
          "dev": true,
          "optional": true
        },
        "console-control-strings": {
          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "resolved": false,
          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
          "dev": true,
          "optional": true
        },
        "core-util-is": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
          "dev": true,
          "optional": true
@ -12926,28 +12906,28 @@
        },
        "delegates": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
          "dev": true,
          "optional": true
        },
        "detect-libc": {
          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+          "resolved": false,
          "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
          "dev": true,
          "optional": true
        },
        "fs.realpath": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
          "dev": true,
          "optional": true
        },
        "gauge": {
          "version": "2.7.4",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+          "resolved": false,
          "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
          "dev": true,
          "optional": true,
@ -12979,7 +12959,7 @@
        },
        "has-unicode": {
          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
          "dev": true,
          "optional": true
@ -12996,7 +12976,7 @@
        },
        "ignore-walk": {
          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
+          "resolved": false,
          "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
          "dev": true,
          "optional": true,
@ -13006,7 +12986,7 @@
        },
        "inflight": {
          "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "resolved": false,
          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
          "dev": true,
          "optional": true,
@ -13017,21 +12997,21 @@
        },
        "inherits": {
          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "resolved": false,
          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
          "dev": true,
          "optional": true
        },
        "ini": {
          "version": "1.3.5",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
+          "resolved": false,
          "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
          "dev": true,
          "optional": true
        },
        "is-fullwidth-code-point": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
          "dev": true,
          "optional": true,
@ -13041,14 +13021,14 @@
        },
        "isarray": {
          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
          "dev": true,
          "optional": true
        },
        "minimatch": {
          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "resolved": false,
          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
          "dev": true,
          "optional": true,
@ -13058,14 +13038,14 @@
        },
        "minimist": {
          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": false,
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
          "dev": true,
          "optional": true
        },
        "mkdirp": {
          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "resolved": false,
          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
          "dev": true,
          "optional": true,
@ -13113,7 +13093,7 @@
        },
        "nopt": {
          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
          "dev": true,
          "optional": true,
@ -13142,7 +13122,7 @@
        },
        "npmlog": {
          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
          "dev": true,
          "optional": true,
@ -13155,21 +13135,21 @@
        },
        "number-is-nan": {
          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
          "dev": true,
          "optional": true
        },
        "object-assign": {
          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "resolved": false,
          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
          "dev": true,
          "optional": true
        },
        "once": {
          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "resolved": false,
          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
          "dev": true,
          "optional": true,
@ -13179,21 +13159,21 @@
        },
        "os-homedir": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
          "dev": true,
          "optional": true
        },
        "os-tmpdir": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
          "dev": true,
          "optional": true
        },
        "osenv": {
          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+          "resolved": false,
          "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
          "dev": true,
          "optional": true,
@ -13204,14 +13184,14 @@
        },
        "path-is-absolute": {
          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
          "dev": true,
          "optional": true
        },
        "process-nextick-args": {
          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+          "resolved": false,
          "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
          "dev": true,
          "optional": true
@ -13231,7 +13211,7 @@
          "dependencies": {
            "minimist": {
              "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "resolved": false,
              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
              "dev": true,
              "optional": true
@ -13240,7 +13220,7 @@
        },
        "readable-stream": {
          "version": "2.3.6",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "resolved": false,
          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
          "dev": true,
          "optional": true,
@ -13273,14 +13253,14 @@
        },
        "safer-buffer": {
          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+          "resolved": false,
          "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
          "dev": true,
          "optional": true
        },
        "sax": {
          "version": "1.2.4",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+          "resolved": false,
          "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
          "dev": true,
          "optional": true
@ -13294,21 +13274,21 @@
        },
        "set-blocking": {
          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "resolved": false,
          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
          "dev": true,
          "optional": true
        },
        "signal-exit": {
          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
          "dev": true,
          "optional": true
        },
        "string-width": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
          "dev": true,
          "optional": true,
@ -13320,7 +13300,7 @@
        },
        "string_decoder": {
          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "resolved": false,
          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
          "dev": true,
          "optional": true,
@ -13330,7 +13310,7 @@
        },
        "strip-ansi": {
          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
          "dev": true,
          "optional": true,
@ -13340,7 +13320,7 @@
        },
        "strip-json-comments": {
          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "resolved": false,
          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
          "dev": true,
          "optional": true
@ -13372,7 +13352,7 @@
        },
        "util-deprecate": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
          "dev": true,
          "optional": true
@ -13389,7 +13369,7 @@
        },
        "wrappy": {
          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "resolved": false,
          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
          "dev": true,
          "optional": true
@ -23846,11 +23826,6 @@
        "is-promise": "^2.1.0"
      }
    },
-    "run-parallel": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
-      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q=="
-    },
    "run-queue": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -95,7 +95,7 @@
    "build": "npm-run-all --parallel build:js build:css --serial size",
    "contributors:fetch": "bash -c 'githubcontrib --owner transloadit --repo uppy --cols 6 $([ \"${GITHUB_TOKEN:-}\" = \"\" ] && echo \"\" || echo \"--authToken ${GITHUB_TOKEN:-}\") --showlogin true --sortOrder desc'",
    "contributors:save": "bash -c 'replace-x -m \"<!--contributors-->[\\s\\S]+<!--/contributors-->\" \"<!--contributors-->\n## Contributors\n\n$(npm run --silent contributors:fetch)\n<!--/contributors-->\" README.md'",
-    "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/bundle.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"",
+    "dev:browsersync": "browser-sync start --no-open --no-ghost-mode false --server examples/dev --index Dashboard.html --port 3452 --serveStatic packages/uppy/dist --files \"examples/dev/output/*.js, packages/uppy/dist/uppy.min.css, packages/uppy/lib/**/*\"",
    "dev:watch-sandbox": "cd examples/dev && npm run watch:sandbox",
    "dev:with-companion": "npm-run-all --parallel start:companion dev:watch-sandbox watch:js:lib watch:css dev:browsersync",
    "dev": "npm-run-all --parallel dev:watch-sandbox watch:js:lib watch:css dev:browsersync",
--- a/packages/@uppy/dashboard/package.json
+++ b/packages/@uppy/dashboard/package.json
@ -29,7 +29,6 @@
    "@uppy/utils": "1.0.2",
    "classnames": "^2.2.6",
    "cuid": "^2.1.1",
-    "drag-drop": "2.13.3",
    "lodash.throttle": "^4.1.1",
    "preact": "8.2.9",
    "preact-css-transition-group": "^1.3.0",
--- a/packages/@uppy/dashboard/src/index.js
+++ b/packages/@uppy/dashboard/src/index.js
@ -818,7 +818,8 @@ module.exports = class Dashboard extends Plugin {
      metaFields: this.opts.metaFields,
      targets: [],
      // We'll make them visible once .containerWidth is determined
-      areInsidesReadyToBeVisible: false
+      areInsidesReadyToBeVisible: false,
+      isDraggingOver: false
    })

    const { inline, closeAfterFinish } = this.opts
--- a/packages/@uppy/drag-drop/package.json
+++ b/packages/@uppy/drag-drop/package.json
@ -26,7 +26,6 @@
  },
  "dependencies": {
    "@uppy/utils": "1.0.2",
-    "drag-drop": "2.13.3",
    "preact": "8.2.9"
  },
  "devDependencies": {
--- a/packages/@uppy/drag-drop/src/index.js
+++ b/packages/@uppy/drag-drop/src/index.js
@ -1,7 +1,8 @@
 const { Plugin } = require('@uppy/core')
 const Translator = require('@uppy/utils/lib/Translator')
 const toArray = require('@uppy/utils/lib/toArray')
-const dragDrop = require('drag-drop')
+const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported')
+const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
 const { h } = require('preact')

 /**
@ -35,7 +36,8 @@ module.exports = class DragDrop extends Plugin {
    this.opts = Object.assign({}, defaultOpts, opts)

    // Check for browser dragDrop support
-    this.isDragDropSupported = this.checkDragDropSupport()
+    this.isDragDropSupported = isDragDropSupported()
+    this.removeDragOverClassTimeout = null

    // i18n
    this.translator = new Translator([ this.defaultLocale, this.uppy.locale, this.opts.locale ])
@ -43,68 +45,35 @@ module.exports = class DragDrop extends Plugin {
    this.i18nArray = this.translator.translateArray.bind(this.translator)

    // Bind `this` to class methods
-    this.handleDrop = this.handleDrop.bind(this)
    this.handleInputChange = this.handleInputChange.bind(this)
-    this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
+    this.handleDragOver = this.handleDragOver.bind(this)
+    this.handleDragLeave = this.handleDragLeave.bind(this)
+    this.handleDrop = this.handleDrop.bind(this)
+    this.handlePaste = this.handlePaste.bind(this)
+    this.addFile = this.addFile.bind(this)
    this.render = this.render.bind(this)
  }

-  /**
-   * Checks if the browser supports Drag & Drop (not supported on mobile devices, for example).
-   * @return {Boolean}
-   */
-  checkDragDropSupport () {
-    const div = document.createElement('div')
-
-    if (!('draggable' in div) || !('ondragstart' in div && 'ondrop' in div)) {
-      return false
+  addFile (file) {
+    try {
+      this.uppy.addFile({
+        source: this.id,
+        name: file.name,
+        type: file.type,
+        data: file,
+        meta: {
+          relativePath: file.relativePath || null
+        }
+      })
+    } catch (err) {
+      // Nothing, restriction errors handled in Core
    }
-
-    if (!('FormData' in window)) {
-      return false
-    }
-
-    if (!('FileReader' in window)) {
-      return false
-    }
-
-    return true
-  }
-
-  handleDrop (files) {
-    this.uppy.log('[DragDrop] Files dropped')
-
-    files.forEach((file) => {
-      try {
-        this.uppy.addFile({
-          source: this.id,
-          name: file.name,
-          type: file.type,
-          data: file
-        })
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
-    })
  }

  handleInputChange (event) {
    this.uppy.log('[DragDrop] Files selected through input')
-
    const files = toArray(event.target.files)
-
-    files.forEach((file) => {
-      try {
-        this.uppy.addFile({
-          source: this.id,
-          name: file.name,
-          type: file.type,
-          data: file
-        })
-      } catch (err) {
-        // Nothing, restriction errors handled in Core
-      }
-    })
+    files.forEach(this.addFile)

    // We clear the input after a file is selected, because otherwise
    // change event is not fired in Chrome and Safari when a file
@ -115,6 +84,49 @@ module.exports = class DragDrop extends Plugin {
    event.target.value = null
  }

+  handlePaste (event) {
+    this.uppy.log('[DragDrop] Files were pasted')
+    const files = toArray(event.clipboardData.files)
+    files.forEach(this.addFile)
+  }
+
+  handleDrop (event, dropCategory) {
+    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 })
+
+    // 3. Add all dropped files
+    this.uppy.log('[DragDrop] File were dropped')
+    getDroppedFiles(event.dataTransfer)
+      .then((files) => {
+        files.forEach(this.addFile)
+      })
+  }
+
+  handleDragOver (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    clearTimeout(this.removeDragOverClassTimeout)
+    this.setPluginState({ isDraggingOver: true })
+  }
+
+  handleDragLeave (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    clearTimeout(this.removeDragOverClassTimeout)
+    // Timeout against flickering, this solution is taken from drag-drop library. Solution with 'pointer-events: none' didn't work across browsers.
+    this.removeDragOverClassTimeout = setTimeout(() => {
+      this.setPluginState({ isDraggingOver: false })
+    }, 50)
+  }
+
  render (state) {
    /* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
    const hiddenInputStyle = {
@ -125,18 +137,32 @@ module.exports = class DragDrop extends Plugin {
      position: 'absolute',
      zIndex: -1
    }
-    const DragDropClass = `uppy-Root uppy-DragDrop-container ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}`
-    const DragDropStyle = {
+
+    const dragDropClass = `
+      uppy-Root
+      uppy-DragDrop-container
+      ${this.isDragDropSupported ? 'uppy-DragDrop--is-dragdrop-supported' : ''}
+      ${this.getPluginState().isDraggingOver ? 'uppy-DragDrop--isDraggingOver' : ''}
+    `
+
+    const dragDropStyle = {
      width: this.opts.width,
      height: this.opts.height
    }
+
    const restrictions = this.uppy.opts.restrictions

    // empty value="" on file input, so that the input is cleared after a file is selected,
    // because Uppy will be handling the upload and so we can select same file
    // after removing — otherwise browser thinks it’s already selected
    return (
-      <div class={DragDropClass} style={DragDropStyle}>
+      <div
+        class={dragDropClass}
+        style={dragDropStyle}
+        onDragOver={this.handleDragOver}
+        onDragLeave={this.handleDragLeave}
+        onDrop={this.handleDrop}
+        onPaste={this.handlePaste}>
        <div class="uppy-DragDrop-inner">
          <svg aria-hidden="true" class="UppyIcon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16">
            <path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fill-rule="evenodd" />
@ -160,18 +186,16 @@ module.exports = class DragDrop extends Plugin {
  }

  install () {
+    this.setPluginState({
+      isDraggingOver: false
+    })
    const target = this.opts.target
    if (target) {
      this.mount(target, this)
    }
-    this.removeDragDropListener = dragDrop(this.el, (files) => {
-      this.handleDrop(files)
-      this.uppy.log(files)
-    })
  }

  uninstall () {
    this.unmount()
-    this.removeDragDropListener()
  }
 }
--- a/packages/@uppy/drag-drop/src/style.scss
+++ b/packages/@uppy/drag-drop/src/style.scss
@ -7,7 +7,6 @@
  justify-content: center;
  border-radius: 7px;
  background-color: $white;
-  // cursor: pointer;
 }

 .uppy-DragDrop-inner {
@ -25,22 +24,16 @@
 }

  .uppy-DragDrop--is-dragdrop-supported {
-    border: 2px dashed;
-    border-color: lighten($gray-500, 10%);
+    border: 2px dashed lighten($gray-500, 10%);
  }

-  // .uppy-DragDrop-container.is-dragdrop-supported .uppy-DragDrop-dragText {
-  //   display: inline;
-  // }
-
-  .uppy-DragDrop-container.drag {
-    border-color: $gray-500;
-    background-color: darken($white, 10%);
-  }
-
-  .uppy-DragDrop-container.drag .uppy-DragDrop-arrow {
+.uppy-DragDrop--isDraggingOver{
+  border: 2px dashed $blue;
+  background: $gray-200;
+  .uppy-DragDrop-arrow {
    fill: $gray-500;
  }
+}

 .uppy-DragDrop-label {
  display: block;
--- a/packages/@uppy/utils/src/isDragDropSupported.js
+++ b/packages/@uppy/utils/src/isDragDropSupported.js
@ -0,0 +1,22 @@
+/**
+ * Checks if the browser supports Drag & Drop (not supported on mobile devices, for example).
+ *
+ * @return {Boolean}
+ */
+module.exports = function isDragDropSupported () {
+  const div = document.createElement('div')
+
+  if (!('draggable' in div) || !('ondragstart' in div && 'ondrop' in div)) {
+    return false
+  }
+
+  if (!('FormData' in window)) {
+    return false
+  }
+
+  if (!('FileReader' in window)) {
+    return false
+  }
+
+  return true
+}
--- a/packages/@uppy/utils/types/index.d.ts
+++ b/packages/@uppy/utils/types/index.d.ts
@ -93,6 +93,10 @@ declare module '@uppy/utils/lib/isObjectURL' {
  export default function isObjectURL(url: string): boolean;
 }

+declare module '@uppy/utils/lib/isDragDropSupported' {
+  export default function isDragDropSupported(): boolean;
+}
+
 declare module '@uppy/utils/lib/isPreviewSupported' {
  export default function isPreviewSupported(mime: string): boolean;
 }