diff --git a/README.md b/README.md index a0d7b464ee..7d558c0509 100644 --- a/README.md +++ b/README.md @@ -41,8 +41,8 @@ import Tus from '@uppy/tus' const uppy = new Uppy() .use(Dashboard, { trigger: '#select-files' }) .use(RemoteSources, { companionUrl: 'https://companion.uppy.io' }) - .use(Webcam, { target: Dashboard }) - .use(ImageEditor, { target: Dashboard }) + .use(Webcam) + .use(ImageEditor) .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) .on('complete', (result) => { console.log('Upload result:', result) diff --git a/docs/guides/migration-guides.md b/docs/guides/migration-guides.md index ca09b5f75f..4413da8fea 100644 --- a/docs/guides/migration-guides.md +++ b/docs/guides/migration-guides.md @@ -60,16 +60,14 @@ new Uppy() companionAllowedHosts: COMPANION_ALLOWED_HOSTS, }) .use(Webcam, { - target: Dashboard, showVideoSourceDropdown: true, showRecordingLength: true, }) .use(Audio, { - target: Dashboard, showRecordingLength: true, }) - .use(ScreenCapture, { target: Dashboard }) - .use(ImageEditor, { target: Dashboard }) + .use(ScreenCapture) + .use(ImageEditor) .use(Transloadit, { service: 'https://api2.transloadit.com', async getAssemblyOptions(file) { diff --git a/docs/presets/remote-sources.mdx b/docs/presets/remote-sources.mdx index 8c7655621c..1169bf90ab 100644 --- a/docs/presets/remote-sources.mdx +++ b/docs/presets/remote-sources.mdx @@ -135,7 +135,8 @@ default: `same-origin`). #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string`, `Element`, `Function`, or `UIPlugin`, default: `Dashboard`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). [`request.credentials` value]: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials diff --git a/docs/sources/audio.mdx b/docs/sources/audio.mdx index 0a612cfcc4..c9528d3f22 100644 --- a/docs/sources/audio.mdx +++ b/docs/sources/audio.mdx @@ -50,7 +50,7 @@ yarn add @uppy/audio import { Uppy, Dashboard, Audio } from "{{UPPY_JS_URL}}" const uppy = new Uppy() uppy.use(Dashboard, { inline: true, target: 'body' }) - uppy.use(Audio, { target: Uppy.Dashboard }) + uppy.use(Audio) `} @@ -67,9 +67,7 @@ import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; import '@uppy/audio/dist/style.min.css'; -new Uppy() - .use(Dashboard, { inline: true, target: 'body' }) - .use(Audio, { target: Dashboard }); +new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Audio); ``` ### API @@ -87,8 +85,9 @@ Configures the title / name shown in the UI, for instance, on Dashboard tabs #### `target` -DOM element, CSS selector, or plugin to place the audio into (`string` or -`Element`, default: `null`). +DOM element, CSS selector, or plugin to place the drag and drop area into +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `showAudioSourceDropdown` diff --git a/docs/sources/companion-plugins/box.mdx b/docs/sources/companion-plugins/box.mdx index 695a0579cd..df35317e58 100644 --- a/docs/sources/companion-plugins/box.mdx +++ b/docs/sources/companion-plugins/box.mdx @@ -76,10 +76,9 @@ import Box from '@uppy/box'; import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; -new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Box, { - target: Dashboard, - companionUrl: 'https://your-companion.com', -}); +new Uppy() + .use(Dashboard, { inline: true, target: '#dashboard' }) + .use(Box, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -150,7 +149,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/dropbox.mdx b/docs/sources/companion-plugins/dropbox.mdx index 4ac6b712ec..b5c52dd86c 100644 --- a/docs/sources/companion-plugins/dropbox.mdx +++ b/docs/sources/companion-plugins/dropbox.mdx @@ -76,10 +76,9 @@ import Dropbox from '@uppy/dropbox'; import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; -new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Dropbox, { - target: Dashboard, - companionUrl: 'https://your-companion.com', -}); +new Uppy() + .use(Dashboard, { inline: true, target: '#dashboard' }) + .use(Dropbox, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -149,7 +148,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/facebook.mdx b/docs/sources/companion-plugins/facebook.mdx index 40927d7c66..059f68c45e 100644 --- a/docs/sources/companion-plugins/facebook.mdx +++ b/docs/sources/companion-plugins/facebook.mdx @@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css'; new Uppy() .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Facebook, { - target: Dashboard, - companionUrl: 'https://your-companion.com', - }); + .use(Facebook, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -148,7 +145,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/google-drive.mdx b/docs/sources/companion-plugins/google-drive.mdx index 0c58b86e8f..3685c7ddc9 100644 --- a/docs/sources/companion-plugins/google-drive.mdx +++ b/docs/sources/companion-plugins/google-drive.mdx @@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css'; new Uppy() .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(GoogleDrive, { - target: Dashboard, - companionUrl: 'https://your-companion.com', - }); + .use(GoogleDrive, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -152,7 +149,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/instagram.mdx b/docs/sources/companion-plugins/instagram.mdx index 8a032ed615..358f184940 100644 --- a/docs/sources/companion-plugins/instagram.mdx +++ b/docs/sources/companion-plugins/instagram.mdx @@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css'; new Uppy() .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Instagram, { - target: Dashboard, - companionUrl: 'https://your-companion.com', - }); + .use(Instagram, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -142,7 +139,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/onedrive.mdx b/docs/sources/companion-plugins/onedrive.mdx index e88397f6bd..499cddb3de 100644 --- a/docs/sources/companion-plugins/onedrive.mdx +++ b/docs/sources/companion-plugins/onedrive.mdx @@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css'; new Uppy() .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(OneDrive, { - target: Dashboard, - companionUrl: 'https://your-companion.com', - }); + .use(OneDrive, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -142,7 +139,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/unsplash.mdx b/docs/sources/companion-plugins/unsplash.mdx index 6e8da0d745..7bb1f59d14 100644 --- a/docs/sources/companion-plugins/unsplash.mdx +++ b/docs/sources/companion-plugins/unsplash.mdx @@ -78,10 +78,7 @@ import '@uppy/dashboard/dist/style.min.css'; new Uppy() .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(Unsplash, { - target: Dashboard, - companionUrl: 'https://your-companion.com', - }); + .use(Unsplash, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -127,7 +124,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/url.mdx b/docs/sources/companion-plugins/url.mdx index 8ad4d207da..000ecebf38 100644 --- a/docs/sources/companion-plugins/url.mdx +++ b/docs/sources/companion-plugins/url.mdx @@ -83,10 +83,9 @@ import Url from '@uppy/url'; import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; -new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Url, { - target: Dashboard, - companionUrl: 'https://your-companion.com', -}); +new Uppy() + .use(Dashboard, { inline: true, target: '#dashboard' }) + .use(Url, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -110,7 +109,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/companion-plugins/zoom.mdx b/docs/sources/companion-plugins/zoom.mdx index 141bf151b6..2b38c6f5ac 100644 --- a/docs/sources/companion-plugins/zoom.mdx +++ b/docs/sources/companion-plugins/zoom.mdx @@ -76,10 +76,9 @@ import Zoom from '@uppy/zoom'; import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; -new Uppy().use(Dashboard, { inline: true, target: '#dashboard' }).use(Zoom, { - target: Dashboard, - companionUrl: 'https://your-companion.com', -}); +new Uppy() + .use(Dashboard, { inline: true, target: '#dashboard' }) + .use(Zoom, { companionUrl: 'https://your-companion.com' }); ``` ### Use in Companion @@ -121,7 +120,8 @@ Title / name shown in the UI, such as Dashboard tabs (`string`, default: #### `target` DOM element, CSS selector, or plugin to place the drag and drop area into -(`string` or `Element`, default: `null`). +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `companionUrl` diff --git a/docs/sources/screen-capture.mdx b/docs/sources/screen-capture.mdx index 131ae50278..a2329f7336 100644 --- a/docs/sources/screen-capture.mdx +++ b/docs/sources/screen-capture.mdx @@ -62,7 +62,7 @@ yarn add @uppy/screen-capture import { Uppy, Dashboard, ScreenCapture } from "{{UPPY_JS_URL}}" const uppy = new Uppy() uppy.use(Dashboard, { inline: true, target: 'body' }) - uppy.use(ScreenCapture, { target: Uppy.Dashboard }) + uppy.use(ScreenCapture) `} @@ -79,9 +79,7 @@ import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; import '@uppy/screen-capture/dist/style.min.css'; -new Uppy() - .use(Dashboard, { inline: true, target: 'body' }) - .use(ScreenCapture, { target: Dashboard }); +new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(ScreenCapture); ``` ### API @@ -99,8 +97,9 @@ Configures the title / name shown in the UI, for instance, on Dashboard tabs #### `target` -DOM element, CSS selector, or plugin to place the screen capture into (`string` -or `Element`, default: `null`). +DOM element, CSS selector, or plugin to place the drag and drop area into +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `displayMediaConstraints` diff --git a/docs/sources/webcam.mdx b/docs/sources/webcam.mdx index 8df2bf2234..08cf5e3bf4 100644 --- a/docs/sources/webcam.mdx +++ b/docs/sources/webcam.mdx @@ -51,7 +51,7 @@ yarn add @uppy/webcam import { Uppy, Dashboard, Webcam } from "{{UPPY_JS_URL}}" const uppy = new Uppy() uppy.use(Dashboard, { inline: true, target: 'body' }) - uppy.use(Webcam, { target: Uppy.Dashboard }) + uppy.use(Webcam) `} @@ -77,9 +77,7 @@ import '@uppy/core/dist/style.min.css'; import '@uppy/dashboard/dist/style.min.css'; import '@uppy/webcam/dist/style.min.css'; -new Uppy() - .use(Dashboard, { inline: true, target: 'body' }) - .use(Webcam, { target: Dashboard }); +new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Webcam); ``` ## API @@ -92,8 +90,9 @@ A unique identifier for this plugin (`string`, default: `'Webcam'`). #### `target` -DOM element, CSS selector, or plugin to place the webcam into (`string` or -`Element`, default: `null`). +DOM element, CSS selector, or plugin to place the drag and drop area into +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `countdown` diff --git a/docs/user-interfaces/elements/image-editor.mdx b/docs/user-interfaces/elements/image-editor.mdx index 255038693e..033dd635ee 100644 --- a/docs/user-interfaces/elements/image-editor.mdx +++ b/docs/user-interfaces/elements/image-editor.mdx @@ -48,7 +48,7 @@ yarn add @uppy/core @uppy/dashboard @uppy/image-editor import { Uppy, Dashboard, ImageEditor } from "{{UPPY_JS_URL}}" const uppy = new Uppy() uppy.use(Dashboard, { target: '#uppy', inline: true }) - uppy.use(ImageEditor, { target: Uppy.Dashboard }) + uppy.use(ImageEditor) `} @@ -67,7 +67,7 @@ import '@uppy/image-editor/dist/style.min.css'; new Uppy() .use(Dashboard, { inline: true, target: '#dashboard' }) - .use(ImageEditor, { target: Dashboard }); + .use(ImageEditor); ``` ## API diff --git a/docs/user-interfaces/elements/status-bar.mdx b/docs/user-interfaces/elements/status-bar.mdx index 663414f22b..b740672feb 100644 --- a/docs/user-interfaces/elements/status-bar.mdx +++ b/docs/user-interfaces/elements/status-bar.mdx @@ -82,8 +82,9 @@ Use this if you need to add several StatusBar instances. #### `target` -DOM element, CSS selector, or plugin to mount the Status Bar into (`Element`, -`string`, `UIPlugin`, default: `'body'`). +DOM element, CSS selector, or plugin to place the drag and drop area into +(`string`, `Element`, `Function`, or `UIPlugin`, default: +[`Dashboard`](/docs/dashboard)). #### `hideAfterFinish` diff --git a/packages/@uppy/image-editor/README.md b/packages/@uppy/image-editor/README.md index 38185b2a2a..56628466d0 100644 --- a/packages/@uppy/image-editor/README.md +++ b/packages/@uppy/image-editor/README.md @@ -27,10 +27,7 @@ import ImageEditor from '@uppy/image-editor' const uppy = new Uppy() uppy.use(Dashboard) -uppy.use(ImageEditor, { - target: Dashboard, - quality: 0.7, -}) +uppy.use(ImageEditor, { quality: 0.7 }) ``` ## Installation