@uppy/dashboard: propagate setOptions to StatusBar

packages/@uppy/dashboard/src/Dashboard.tsx

@@ -1297,6 +1297,60 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
  }
  }
 
+ #getStatusBarOpts() {
+ return {
+ hideUploadButton: this.opts.hideUploadButton,
+ hideRetryButton: this.opts.hideRetryButton,
+ hidePauseResumeButton: this.opts.hidePauseResumeButton,
+ hideCancelButton: this.opts.hideCancelButton,
+ showProgressDetails: this.opts.showProgressDetails,
+ hideAfterFinish: this.opts.hideProgressAfterFinish,
+ locale: this.opts.locale,
+ doneButtonHandler: this.opts.doneButtonHandler,
+ }
+ }
+
+ #getThumbnailGeneratorOpts() {
+ return {
+ thumbnailWidth: this.opts.thumbnailWidth,
+ thumbnailHeight: this.opts.thumbnailHeight,
+ thumbnailType: this.opts.thumbnailType,
+ waitForThumbnailsBeforeUpload: this.opts.waitForThumbnailsBeforeUpload,
+ // If we don't block on thumbnails, we can lazily generate them
+ lazy: !this.opts.waitForThumbnailsBeforeUpload,
+ }
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ #getInformerOpts() {
+ return {
+ // currently no options
+ }
+ }
+
+ setOptions(opts: Partial<DashboardOptions<M, B>>) {
+ super.setOptions(opts)
+ this.uppy
+ .getPlugin(this.#getStatusBarId())
+ ?.setOptions(this.#getStatusBarOpts())
+
+ this.uppy
+ .getPlugin(this.#getThumbnailGeneratorId())
+ ?.setOptions(this.#getThumbnailGeneratorOpts())
+ }
+
+ #getStatusBarId() {
+ return `${this.id}:StatusBar`
+ }
+
+ #getThumbnailGeneratorId() {
+ return `${this.id}:ThumbnailGenerator`
+ }
+
+ #getInformerId() {
+ return `${this.id}:Informer`
+ }
+
  install = (): void => {
  // Set default state for Dashboard
  this.setPluginState({
@@ -1339,35 +1393,24 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
 
  if (!this.opts.disableStatusBar) {
  this.uppy.use(StatusBar, {
- id: `${this.id}:StatusBar`,
+ id: this.#getStatusBarId(),
  target: this,
- hideUploadButton: this.opts.hideUploadButton,
- hideRetryButton: this.opts.hideRetryButton,
- hidePauseResumeButton: this.opts.hidePauseResumeButton,
- hideCancelButton: this.opts.hideCancelButton,
- showProgressDetails: this.opts.showProgressDetails,
- hideAfterFinish: this.opts.hideProgressAfterFinish,
- locale: this.opts.locale,
- doneButtonHandler: this.opts.doneButtonHandler,
+ ...this.#getStatusBarOpts(),
  })
  }
 
  if (!this.opts.disableInformer) {
  this.uppy.use(Informer, {
- id: `${this.id}:Informer`,
+ id: this.#getInformerId(),
  target: this,
+ ...this.#getInformerOpts(),
  })
  }
 
  if (!this.opts.disableThumbnailGenerator) {
  this.uppy.use(ThumbnailGenerator, {
- id: `${this.id}:ThumbnailGenerator`,
- thumbnailWidth: this.opts.thumbnailWidth,
- thumbnailHeight: this.opts.thumbnailHeight,
- thumbnailType: this.opts.thumbnailType,
- waitForThumbnailsBeforeUpload: this.opts.waitForThumbnailsBeforeUpload,
- // If we don't block on thumbnails, we can lazily generate them
- lazy: !this.opts.waitForThumbnailsBeforeUpload,
+ id: this.#getThumbnailGeneratorId(),
+ ...this.#getThumbnailGeneratorOpts(),
  })
  }
 

packages/@uppy/react/src/nonHtmlPropsHaveChanged.ts

@@ -1,7 +1,12 @@
+import getHTMLProps from './getHTMLProps'
+
 export default function nonHtmlPropsHaveChanged<
  T extends Record<string, unknown>,
 >(props: T, prevProps: T): boolean {
+ // todo instead rewrite the components that use nonHtmlPropsHaveChanged
+ // to hooks, so we can use useEffect on specific props instead of this hack
+ const htmlProps = getHTMLProps(props)
  return Object.keys(props).some(
- (key) => !Object.hasOwn(props, key) && props[key] !== prevProps[key],
+ (key) => !Object.hasOwn(htmlProps, key) && props[key] !== prevProps[key],
  )
 }

private/dev/Dashboard.js

@@ -1,7 +1,6 @@
 // The @uppy/ dependencies are resolved from source
 /* eslint-disable import/no-extraneous-dependencies */
 import Uppy, { debugLogger } from '@uppy/core'
-import Dashboard from '@uppy/dashboard'
 import RemoteSources from '@uppy/remote-sources'
 import Webcam from '@uppy/webcam'
 import ScreenCapture from '@uppy/screen-capture'
@@ -11,7 +10,6 @@ import AwsS3 from '@uppy/aws-s3'
 import AwsS3Multipart from '@uppy/aws-s3-multipart'
 import XHRUpload from '@uppy/xhr-upload'
 import Transloadit from '@uppy/transloadit'
-import Form from '@uppy/form'
 import ImageEditor from '@uppy/image-editor'
 import DropTarget from '@uppy/drop-target'
 import Audio from '@uppy/audio'
@@ -77,10 +75,7 @@ function getCompanionKeysParams (name) {
 
 // Rest is implementation! Obviously edit as necessary...
 
-export default () => {
- const restrictions = undefined
- // const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
-
+export default ({ restrictions } = {}) => {
  const uppyDashboard = new Uppy({
  logger: debugLogger,
  meta: {
@@ -90,44 +85,29 @@ export default () => {
  allowMultipleUploadBatches: false,
  restrictions,
  })
- .use(Dashboard, {
- trigger: '#pick-files',
- // inline: true,
- target: '.foo',
- metaFields: [
- { id: 'license', name: 'License', placeholder: 'specify license' },
- { id: 'caption', name: 'Caption', placeholder: 'add caption' },
- ],
- showProgressDetails: true,
- proudlyDisplayPoweredByUppy: true,
- note: `${JSON.stringify(restrictions)}`,
- })
- .use(GoogleDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts, ...getCompanionKeysParams('GOOGLE_DRIVE') })
- // .use(Instagram, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(Dropbox, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(Box, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(Facebook, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(OneDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(Zoom, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(Url, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
- // .use(Unsplash, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
+ .use(GoogleDrive, { companionUrl: COMPANION_URL, companionAllowedHosts, ...getCompanionKeysParams('GOOGLE_DRIVE') })
+ // .use(Instagram, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(Dropbox, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(Box, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(Facebook, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(OneDrive, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(Zoom, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(Url, { companionUrl: COMPANION_URL, companionAllowedHosts })
+ // .use(Unsplash, { companionUrl: COMPANION_URL, companionAllowedHosts })
  .use(RemoteSources, {
  companionUrl: COMPANION_URL,
  sources: ['Box', 'Dropbox', 'Facebook', 'Instagram', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
  companionAllowedHosts,
  })
  .use(Webcam, {
- target: Dashboard,
  showVideoSourceDropdown: true,
  showRecordingLength: true,
  })
  .use(Audio, {
- target: Dashboard,
  showRecordingLength: true,
  })
- .use(ScreenCapture, { target: Dashboard })
- .use(Form, { target: '#upload-form' })
- .use(ImageEditor, { target: Dashboard })
+ .use(ScreenCapture)
+ .use(ImageEditor)
  .use(DropTarget, {
  target: document.body,
  })
@@ -185,8 +165,6 @@ export default () => {
  uppyDashboard.use(GoldenRetriever, { serviceWorker: true })
  }
 
- window.uppy = uppyDashboard
-
  uppyDashboard.on('complete', (result) => {
  if (result.failed.length === 0) {
  console.log('Upload successful 😀')
@@ -200,6 +178,5 @@ export default () => {
  }
  })
 
- const modalTrigger = document.querySelector('#pick-files')
- if (modalTrigger) modalTrigger.click()
+ return uppyDashboard
 }

private/dev/React.jsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/react-in-jsx-scope, import/no-extraneous-dependencies */
+// eslint-disable-next-line no-unused-vars
+import { createElement as h, useState, useCallback } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
+
+import '@uppy/core/dist/style.css';
+import '@uppy/dashboard/dist/style.css';
+
+import { Dashboard } from '@uppy/react';
+
+import DashboardUppy from './Dashboard.js'
+
+
+function App() {
+ const [uppy] = useState(() => DashboardUppy());
+
+ const [i, setI] = useState(0);
+
+ // https://github.com/transloadit/uppy/issues/5248
+ const handleDoneButtonClick = useCallback(() => {
+ setI(i + 1);
+ console.log('Done button clicked', i);
+ }, [i]);
+
+ return (
+ <div>
+ <h1>React Uppy</h1>
+ <Dashboard uppy={uppy} doneButtonHandler={handleDoneButtonClick} />
+ </div>
+ );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

private/dev/index.html

@@ -42,6 +42,9 @@
  <main class="foo">
  <h1>Dashboard is here</h1>
 
+ <p><a href="/react.html">React dashboard</a></p>
+ <p><a href="/dragdrop.html">DragDrop</a></p>
+
  <!-- some inputs in a form to check focus management in Dashboard -->
  <form id="upload-form" action="/">
  <button type="button" id="pick-files">Pick Files</button><br />

private/dev/index.js

@@ -1,12 +1,43 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Form from '@uppy/form'
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Dashboard from '@uppy/dashboard'
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'uppy/src/style.scss'
 
 import DragDrop from './DragDrop.js'
-import Dashboard from './Dashboard.js'
+import DashboardUppy from './Dashboard.js'
+
 
 switch (window.location.pathname.toLowerCase()) {
  case '/':
- case '/dashboard.html': Dashboard(); break
+ case '/dashboard.html': {
+ const restrictions = undefined
+ // const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
+
+ const uppy = DashboardUppy({ restrictions })
+ .use(Dashboard, {
+ trigger: '#pick-files',
+ // inline: true,
+ target: '.foo',
+ metaFields: [
+ { id: 'license', name: 'License', placeholder: 'specify license' },
+ { id: 'caption', name: 'Caption', placeholder: 'add caption' },
+ ],
+ showProgressDetails: true,
+ proudlyDisplayPoweredByUppy: true,
+ note: `${JSON.stringify(restrictions)}`,
+ })
+ .use(Form, { target: '#upload-form' })
+
+ window.uppy = uppy
+
+ const modalTrigger = document.querySelector('#pick-files')
+ if (modalTrigger) modalTrigger.click()
+ }
+ break
  case '/dragdrop.html': DragDrop(); break
  default: throw new Error('404')
 }

private/dev/package.json

@@ -13,6 +13,8 @@
  "autoprefixer": "^10.2.6",
  "postcss-dir-pseudo-class": "^6.0.0",
  "postcss-logical": "^5.0.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
  "vite": "^5.0.0"
  },
  "private": true,

private/dev/react.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>React</title>
+ <link rel="icon" type="image/png" href="https://uppy.io/img/logo.svg" />
+ </head>
+
+ <body>
+ <div id="root"></div>
+ <script type="module" src="/React.jsx"></script>
+ </body>
+</html>

yarn.lock

@@ -8097,6 +8097,8 @@ __metadata:
  autoprefixer: "npm:^10.2.6"
  postcss-dir-pseudo-class: "npm:^6.0.0"
  postcss-logical: "npm:^5.0.0"
+ react: "npm:^18.3.1"
+ react-dom: "npm:^18.3.1"
  vite: "npm:^5.0.0"
  languageName: unknown
  linkType: soft
@@ -24782,7 +24784,7 @@ __metadata:
  languageName: node
  linkType: hard
 
-"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0, react-dom@npm:^18.3.1":
  version: 18.3.1
  resolution: "react-dom@npm:18.3.1"
  dependencies:
@@ -24938,7 +24940,7 @@ __metadata:
  languageName: node
  linkType: hard
 
-"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0, react@npm:^18.3.1":
  version: 18.3.1
  resolution: "react@npm:18.3.1"
  dependencies: