add `this.opts.id || [name]` to this.id for all UI plugins

src/plugins/Dashboard/index.js

@@ -9,12 +9,12 @@ const prettyBytes = require('prettier-bytes')
 const { defaultTabIcon } = require('./icons')
 
 /**
- * Modal Dialog & Dashboard
+ * Dashboard UI with previews, metadata editing, tabs for various services and more
  */
 module.exports = class DashboardUI extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.id = 'Dashboard'
+    this.id = this.opts.id || 'Dashboard'
     this.title = 'Dashboard'
     this.type = 'orchestrator'
 
@@ -404,7 +404,6 @@ module.exports = class DashboardUI extends Plugin {
     })
 
     const target = this.opts.target
-
     if (target) {
       this.mount(target, this)
     }

src/plugins/DragDrop/index.js

@@ -12,7 +12,7 @@ module.exports = class DragDrop extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'acquirer'
-    this.id = 'DragDrop'
+    this.id = this.opts.id || 'DragDrop'
     this.title = 'Drag & Drop'
     this.icon = html`
       <svg aria-hidden="true" class="UppyIcon" width="28" height="28" viewBox="0 0 16 16">
@@ -152,9 +152,8 @@ module.exports = class DragDrop extends Plugin {
 
   install () {
     const target = this.opts.target
-    const plugin = this
     if (target) {
-      this.mount(target, plugin)
+      this.mount(target, this)
     }
   }
 

src/plugins/Dropbox/index.js

@@ -10,7 +10,7 @@ module.exports = class Dropbox extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'acquirer'
-    this.id = 'Dropbox'
+    this.id = this.opts.id || 'Dropbox'
     this.title = 'Dropbox'
     this.stateId = 'dropbox'
     this.icon = () => html`

src/plugins/Dummy.js

@@ -10,7 +10,7 @@ module.exports = class Dummy extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'acquirer'
-    this.id = 'Dummy'
+    this.id = this.opts.id || 'Dummy'
     this.title = 'Mr. Plugin'
 
     // set default options
@@ -57,8 +57,9 @@ module.exports = class Dummy extends Plugin {
     this.core.setState({dummy: {text: '123'}})
 
     const target = this.opts.target
-    const plugin = this
-    this.target = this.mount(target, plugin)
+    if (target) {
+      this.mount(target, this)
+    }
 
     setTimeout(() => {
       this.core.setState({dummy: {text: '!!!'}})

src/plugins/FileInput.js

@@ -6,7 +6,7 @@ const html = require('yo-yo')
 module.exports = class FileInput extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.id = 'FileInput'
+    this.id = this.opts.id || 'FileInput'
     this.title = 'File Input'
     this.type = 'acquirer'
 
@@ -79,8 +79,9 @@ module.exports = class FileInput extends Plugin {
 
   install () {
     const target = this.opts.target
-    const plugin = this
-    this.target = this.mount(target, plugin)
+    if (target) {
+      this.mount(target, this)
+    }
   }
 
   uninstall () {

src/plugins/GoogleDrive/index.js

@@ -9,7 +9,7 @@ module.exports = class GoogleDrive extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'acquirer'
-    this.id = 'GoogleDrive'
+    this.id = this.opts.id || 'GoogleDrive'
     this.title = 'Google Drive'
     this.stateId = 'googleDrive'
     this.icon = () => html`

src/plugins/Informer.js

@@ -12,7 +12,7 @@ module.exports = class Informer extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'progressindicator'
-    this.id = 'Informer'
+    this.id = this.opts.id || 'Informer'
     this.title = 'Informer'
     // this.timeoutID = undefined
 
@@ -60,7 +60,8 @@ module.exports = class Informer extends Plugin {
 
   install () {
     const target = this.opts.target
-    const plugin = this
-    this.target = this.mount(target, plugin)
+    if (target) {
+      this.mount(target, this)
+    }
   }
 }

src/plugins/Instagram/index.js

@@ -9,7 +9,7 @@ module.exports = class Instagram extends Plugin {
   constructor (core, opts) {
     super(core, opts)
     this.type = 'acquirer'
-    this.id = 'Instagram'
+    this.id = this.opts.id || 'Instagram'
     this.title = 'Instagram'
     this.stateId = 'instagram'
     this.icon = () => html`

src/plugins/ProgressBar.js

@@ -8,7 +8,7 @@ const html = require('yo-yo')
 module.exports = class ProgressBar extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.id = 'ProgressBar'
+    this.id = this.opts.id || 'ProgressBar'
     this.title = 'Progress Bar'
     this.type = 'progressindicator'
 
@@ -36,9 +36,8 @@ module.exports = class ProgressBar extends Plugin {
 
   install () {
     const target = this.opts.target
-    const plugin = this
     if (target) {
-      this.mount(target, plugin)
+      this.mount(target, this)
     }
   }
 

src/plugins/StatusBar/index.js

@@ -12,7 +12,7 @@ const prettyBytes = require('prettier-bytes')
 module.exports = class StatusBarUI extends Plugin {
   constructor (core, opts) {
     super(core, opts)
-    this.id = 'StatusBar'
+    this.id = this.opts.id || 'StatusBar'
     this.title = 'StatusBar'
     this.type = 'progressindicator'
 
@@ -154,9 +154,8 @@ module.exports = class StatusBarUI extends Plugin {
 
   install () {
     const target = this.opts.target
-    const plugin = this
     if (target) {
-      this.mount(target, plugin)
+      this.mount(target, this)
     }
   }
 

src/plugins/Webcam/index.js

@@ -39,9 +39,9 @@ module.exports = class Webcam extends Plugin {
     this.mediaDevices = getMediaDevices()
     this.supportsUserMedia = !!this.mediaDevices
     this.protocol = location.protocol.match(/https/i) ? 'https' : 'http'
-    this.type = 'acquirer'
-    this.id = 'Webcam'
+    this.id = this.opts.id || 'Webcam'
     this.title = 'Webcam'
+    this.type = 'acquirer'
     this.icon = WebcamIcon
     this.focus = this.focus.bind(this)
 
@@ -308,8 +308,9 @@ module.exports = class Webcam extends Plugin {
     })
 
     const target = this.opts.target
-    const plugin = this
-    this.target = this.mount(target, plugin)
+    if (target) {
+      this.mount(target, this)
+    }
   }
 
   uninstall () {