Add support for drag-dropping urls, links or images from webpages to Uppy via Url plugin

src/plugins/Url/index.js

@@ -54,6 +54,9 @@ module.exports = class Url extends Plugin {
     // Bind all event handlers for referencability
     this.getMeta = this.getMeta.bind(this)
     this.addFile = this.addFile.bind(this)
+    this.handleDrop = this.handleDrop.bind(this)
+    this.handleDragOver = this.handleDragOver.bind(this)
+    this.handleDragLeave = this.handleDragLeave.bind(this)
 
     this.server = new RequestClient(uppy, {host: this.opts.host})
   }
@@ -144,6 +147,31 @@ module.exports = class Url extends Plugin {
       })
   }
 
+  handleDrop (e) {
+    e.preventDefault()
+    if (e.dataTransfer.items) {
+      const items = Array.from(e.dataTransfer.items)
+      items.forEach((item) => {
+        if (item.kind === 'string' && item.type.match('^text/uri-list')) {
+          item.getAsString((url) => {
+            this.uppy.log(`[URL] Adding file from dropped url: ${url}`)
+            this.addFile(url)
+          })
+        }
+      })
+    }
+  }
+
+  handleDragOver (e) {
+    e.preventDefault()
+    this.el.classList.add('drag')
+  }
+
+  handleDragLeave (e) {
+    e.preventDefault()
+    this.el.classList.remove('drag')
+  }
+
   render (state) {
     return <UrlUI
       i18n={this.i18n}
@@ -155,9 +183,17 @@ module.exports = class Url extends Plugin {
     if (target) {
       this.mount(target, this)
     }
+
+    this.el.addEventListener('drop', this.handleDrop)
+    this.el.addEventListener('dragover', this.handleDragOver)
+    this.el.addEventListener('dragleave', this.handleDragLeave)
   }
 
   uninstall () {
+    this.el.removeEventListener('drop', this.handleDrop)
+    this.el.removeEventListener('dragover', this.handleDragOver)
+    this.el.removeEventListener('dragleave', this.handleDragLeave)
+
     this.unmount()
   }
 }