Merge pull request #836 from transloadit/feature/drop-url-link

Url: Add support for drag-dropping urls, links or images from webpages

src/plugins/Url/index.js

@@ -3,6 +3,7 @@ const Translator = require('../../core/Translator')
 const { h } = require('preact')
 const { RequestClient } = require('../../server')
 const UrlUI = require('./UrlUI.js')
+const { toArray } = require('../../core/Utils')
 require('whatwg-fetch')
 
 /**
@@ -54,6 +55,11 @@ 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.handlePaste = this.handlePaste.bind(this)
 
     this.server = new RequestClient(uppy, {host: this.opts.host})
   }
@@ -144,6 +150,52 @@ module.exports = class Url extends Plugin {
       })
   }
 
+  handleDrop (e) {
+    e.preventDefault()
+    if (e.dataTransfer.items) {
+      const items = toArray(e.dataTransfer.items)
+      items.forEach((item) => {
+        if (item.kind === 'string' && item.type === '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')
+  }
+
+  handlePaste (e) {
+    if (e.clipboardData.items) {
+      const items = toArray(e.clipboardData.items)
+
+      // When a file is pasted, it appears as two items: file name string, then
+      // the file itself; Url then treats file name string as URL, which is wrong.
+      // This makes sure Url ignores paste event if it contains an actual file
+      const hasFiles = items.filter(item => item.kind === 'file').length > 0
+      if (hasFiles) return
+
+      items.forEach((item) => {
+        if (item.kind === 'string' && item.type === 'text/plain') {
+          item.getAsString((url) => {
+            this.uppy.log(`[URL] Adding file from pasted url: ${url}`)
+            this.addFile(url)
+          })
+        }
+      })
+    }
+  }
+
   render (state) {
     return <UrlUI
       i18n={this.i18n}
@@ -155,9 +207,19 @@ 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)
+    this.el.addEventListener('paste', this.handlePaste)
   }
 
   uninstall () {
+    this.el.removeEventListener('drop', this.handleDrop)
+    this.el.removeEventListener('dragover', this.handleDragOver)
+    this.el.removeEventListener('dragleave', this.handleDragLeave)
+    this.el.removeEventListener('paste', this.handlePaste)
+
     this.unmount()
   }
 }