@uppy/webcam: fix bug when Dashboard is using a custom id (#4099)

packages/@uppy/core/src/UIPlugin.js

@@ -38,6 +38,25 @@ function debounce (fn) {
 class UIPlugin extends BasePlugin {
   #updateUI
 
+  getTargetPlugin (target) {
+    let targetPlugin
+    if (typeof target === 'object' && target instanceof UIPlugin) {
+      // Targeting a plugin *instance*
+      targetPlugin = target
+    } else if (typeof target === 'function') {
+      // Targeting a plugin type
+      const Target = target
+      // Find the target plugin instance.
+      this.uppy.iteratePlugins(p => {
+        if (p instanceof Target) {
+          targetPlugin = p
+        }
+      })
+    }
+
+    return targetPlugin
+  }
+
   /**
    * Check if supplied `target` is a DOM element or an `object`.
    * If it’s an object — target is a plugin, and we search `plugins`
@@ -87,20 +106,7 @@ class UIPlugin extends BasePlugin {
       return this.el
     }
 
-    let targetPlugin
-    if (typeof target === 'object' && target instanceof UIPlugin) {
-      // Targeting a plugin *instance*
-      targetPlugin = target
-    } else if (typeof target === 'function') {
-      // Targeting a plugin type
-      const Target = target
-      // Find the target plugin instance.
-      this.uppy.iteratePlugins(p => {
-        if (p instanceof Target) {
-          targetPlugin = p
-        }
-      })
-    }
+    const targetPlugin = this.getTargetPlugin(target)
 
     if (targetPlugin) {
       this.uppy.log(`Installing ${callerPluginName} to ${targetPlugin.id}`)

packages/@uppy/core/types/index.d.ts

@@ -105,6 +105,8 @@ export class UIPlugin<TOptions extends PluginOptions = DefaultPluginOptions> ext
 
   update(state?: Record<string, unknown>): void
 
+  getTargetPlugin(target: PluginTarget): UIPlugin | undefined
+
   // eslint-disable-next-line no-use-before-define
   mount(target: PluginTarget, plugin: typeof UIPlugin): void
 

packages/@uppy/webcam/src/Webcam.jsx

@@ -598,8 +598,9 @@ export default class Webcam extends UIPlugin {
   install () {
     const { mobileNativeCamera, modes, facingMode, videoConstraints } = this.opts
 
-    if (mobileNativeCamera) {
-      this.uppy.getPlugin('Dashboard').setOptions({
+    const { target } = this.opts
+    if (mobileNativeCamera && target) {
+      this.getTargetPlugin(target)?.setOptions({
         showNativeVideoCameraButton: isModeAvailable(modes, 'video-only') || isModeAvailable(modes, 'video-audio'),
         showNativePhotoCameraButton: isModeAvailable(modes, 'picture'),
         nativeCameraFacingMode: videoConstraints?.facingMode || facingMode,
@@ -612,7 +613,6 @@ export default class Webcam extends UIPlugin {
       recordingLengthSeconds: 0,
     })
 
-    const { target } = this.opts
     if (target) {
       this.mount(target, this)
     }