@uppy/dashboard - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0

CHANGELOG.md

 # @uppy/dashboard
 
+## 3.4.0
+
+Released: 2023-04-18
+Included in: Uppy v3.8.0
+
+- @uppy/dashboard: Single File Mode: fix layout and make optional (Artur Paikin / #4374)
+
 ## 3.3.1
@@ -4,0 +11,0 @@

lib/components/Dashboard.js

@@ -19,7 +19,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const WIDTH_MD = 576;
-const HEIGHT_MD = 400;
+const HEIGHT_MD = 330; // We might want to enable this in the future
+// const HEIGHT_LG = 400
+// const HEIGHT_XL = 460
+
 export default function Dashboard(props) {
-  const noFiles = props.totalFileCount === 0;
-  const singleFile = props.totalFileCount === 1;
+  const isNoFiles = props.totalFileCount === 0;
+  const isSingleFile = props.totalFileCount === 1;
   const isSizeMD = props.containerWidth > WIDTH_MD;
+  const isSizeHeightMD = props.containerHeight > HEIGHT_MD;
   const dashboardClassName = classNames({
@@ -36,5 +40,9 @@ 'uppy-Dashboard': true,
     'uppy-size--height-md': props.containerHeight > HEIGHT_MD,
+    // We might want to enable this in the future
+    // 'uppy-size--height-lg': props.containerHeight > HEIGHT_LG,
+    // 'uppy-size--height-xl': props.containerHeight > HEIGHT_XL,
     'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel,
     'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible,
-    'uppy-Dashboard--singleFile': singleFile
+    // Only enable “centered single file” mode when Dashboard is tall enough
+    'uppy-Dashboard--singleFile': props.singleFileFullScreen && isSingleFile && isSizeHeightMD
   }); // Important: keep these in sync with the percent width values in `src/components/FileItem/index.scss`.
@@ -52,3 +60,3 @@
 
-  const showFileList = props.showSelectedFiles && !noFiles;
+  const showFileList = props.showSelectedFiles && !isNoFiles;
   const numberOfFilesForRecovery = props.recoveredState ? Object.keys(props.recoveredState.files).length : null;
@@ -132,7 +140,28 @@ const numberOfGhosts = props.files ? Object.keys(props.files).filter(fileID => props.files[fileID].isGhost).length : null;
     className: "uppy-Dashboard-serviceMsg-text"
-  }, renderRestoredText())), showFileList ? h(FileList // eslint-disable-next-line react/jsx-props-no-spreading
-  , _extends({}, props, {
-    singleFile: singleFile,
+  }, renderRestoredText())), showFileList ? h(FileList, {
+    id: props.id,
+    error: props.error,
+    i18n: props.i18n,
+    uppy: props.uppy,
+    files: props.files,
+    acquirers: props.acquirers,
+    resumableUploads: props.resumableUploads,
+    hideRetryButton: props.hideRetryButton,
+    hidePauseResumeButton: props.hidePauseResumeButton,
+    hideCancelButton: props.hideCancelButton,
+    showLinkToFileUploadResult: props.showLinkToFileUploadResult,
+    showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,
+    isWide: props.isWide,
+    metaFields: props.metaFields,
+    toggleFileCard: props.toggleFileCard,
+    handleRequestThumbnail: props.handleRequestThumbnail,
+    handleCancelThumbnail: props.handleCancelThumbnail,
+    recoveredState: props.recoveredState,
+    individualCancellation: props.individualCancellation,
+    openFileEditor: props.openFileEditor,
+    canEditFile: props.canEditFile,
+    toggleAddFilesPanel: props.toggleAddFilesPanel,
+    isSingleFile: isSingleFile,
     itemsPerRow: itemsPerRow
-  })) : // eslint-disable-next-line react/jsx-props-no-spreading
+  }) : // eslint-disable-next-line react/jsx-props-no-spreading
   h(AddFiles, _extends({}, props, {
@@ -139,0 +168,0 @@ isSizeMD: isSizeMD

lib/components/FileItem/FileInfo/index.js

@@ -13,4 +13,4 @@ import { h, Fragment } from 'preact';
   function getMaxNameLength() {
-    if (props.singleFile) {
-      return 200;
+    if (props.isSingleFile && props.containerHeight >= 350) {
+      return 90;
     }
@@ -17,0 +17,0 @@

lib/components/FileItem/FilePreviewAndLink/index.js

@@ -6,23 +6,32 @@ import { h } from 'preact';
 export default function FilePreviewAndLink(props) {
+  const {
+    file,
+    i18n,
+    toggleFileCard,
+    metaFields,
+    showLinkToFileUploadResult
+  } = props;
+  const white = 'rgba(255, 255, 255, 0.5)';
+  const previewBackgroundColor = file.preview ? white : getFileTypeIcon(props.file.type).color;
   return h("div", {
     className: "uppy-Dashboard-Item-previewInnerWrap",
     style: {
-      backgroundColor: getFileTypeIcon(props.file.type).color
+      backgroundColor: previewBackgroundColor
     }
-  }, props.showLinkToFileUploadResult && props.file.uploadURL && h("a", {
+  }, showLinkToFileUploadResult && file.uploadURL && h("a", {
     className: "uppy-Dashboard-Item-previewLink",
-    href: props.file.uploadURL,
+    href: file.uploadURL,
     rel: "noreferrer noopener",
     target: "_blank",
-    "aria-label": props.file.meta.name
+    "aria-label": file.meta.name
   }, h("span", {
     hidden: true
-  }, props.file.meta.name)), h(FilePreview, {
-    file: props.file
+  }, file.meta.name)), h(FilePreview, {
+    file: file
   }), h(MetaErrorMessage, {
-    file: props.file,
-    i18n: props.i18n,
-    toggleFileCard: props.toggleFileCard,
-    metaFields: props.metaFields
+    file: file,
+    i18n: i18n,
+    toggleFileCard: toggleFileCard,
+    metaFields: metaFields
   }));
 }

lib/components/FileItem/index.js

@@ -107,2 +107,3 @@ import { h, Component } from 'preact';
       containerWidth: this.props.containerWidth,
+      containerHeight: this.props.containerHeight,
       i18n: this.props.i18n,
@@ -112,3 +113,3 @@ toggleAddFilesPanel: this.props.toggleAddFilesPanel,
       metaFields: this.props.metaFields,
-      singleFile: this.props.singleFile
+      isSingleFile: this.props.isSingleFile
     }), h(Buttons, {
@@ -115,0 +116,0 @@ file: file,

lib/components/FileList.js

@@ -1,4 +0,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
 import FileItem from "./FileItem/index.js";
@@ -22,44 +21,45 @@ import VirtualList from "./VirtualList.js";
 
-export default (props => {
+export default (_ref => {
+  let {
+    id,
+    error,
+    i18n,
+    uppy,
+    files,
+    acquirers,
+    resumableUploads,
+    hideRetryButton,
+    hidePauseResumeButton,
+    hideCancelButton,
+    showLinkToFileUploadResult,
+    showRemoveButtonAfterComplete,
+    isWide,
+    metaFields,
+    isSingleFile,
+    toggleFileCard,
+    handleRequestThumbnail,
+    handleCancelThumbnail,
+    recoveredState,
+    individualCancellation,
+    itemsPerRow,
+    openFileEditor,
+    canEditFile,
+    toggleAddFilesPanel,
+    containerWidth,
+    containerHeight
+  } = _ref;
   // It's not great that this is hardcoded!
   // It's ESPECIALLY not great that this is checking against `itemsPerRow`!
-  const rowHeight = props.itemsPerRow === 1 // Mobile
+  const rowHeight = itemsPerRow === 1 // Mobile
   ? 71 // 190px height + 2 * 5px margin
-  : 200;
-  const fileProps = {
-    // FIXME This is confusing, it's actually the Dashboard's plugin ID
-    id: props.id,
-    error: props.error,
-    // TODO move this to context
-    i18n: props.i18n,
-    uppy: props.uppy,
-    // features
-    acquirers: props.acquirers,
-    resumableUploads: props.resumableUploads,
-    individualCancellation: props.individualCancellation,
-    // visual options
-    hideRetryButton: props.hideRetryButton,
-    hidePauseResumeButton: props.hidePauseResumeButton,
-    hideCancelButton: props.hideCancelButton,
-    showLinkToFileUploadResult: props.showLinkToFileUploadResult,
-    showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,
-    isWide: props.isWide,
-    metaFields: props.metaFields,
-    recoveredState: props.recoveredState,
-    singleFile: props.singleFile,
-    // callbacks
-    toggleFileCard: props.toggleFileCard,
-    handleRequestThumbnail: props.handleRequestThumbnail,
-    handleCancelThumbnail: props.handleCancelThumbnail
-  };
+  : 200; // Sort files by file.isGhost, ghost files first, only if recoveredState is present
 
-  const sortByGhostComesFirst = (file1, file2) => {
-    return props.files[file2].isGhost - props.files[file1].isGhost;
-  }; // Sort files by file.isGhost, ghost files first, only if recoveredState is present
+  const rows = useMemo(() => {
+    const sortByGhostComesFirst = (file1, file2) => files[file2].isGhost - files[file1].isGhost;
 
+    const fileIds = Object.keys(files);
+    if (recoveredState) fileIds.sort(sortByGhostComesFirst);
+    return chunks(fileIds, itemsPerRow);
+  }, [files, itemsPerRow, recoveredState]);
 
-  const files = Object.keys(props.files);
-  if (props.recoveredState) files.sort(sortByGhostComesFirst);
-  const rows = chunks(files, props.itemsPerRow);
-
   const renderRow = row => // The `role="presentation` attribute ensures that the list items are properly
@@ -72,15 +72,38 @@ // associated with the `VirtualList` element.
     key: row[0]
-  }, row.map(fileID => h(FileItem, _extends({
+  }, row.map(fileID => h(FileItem, {
     key: fileID,
-    uppy: props.uppy
-  }, fileProps, {
-    // eslint-disable-line react/jsx-props-no-spreading
+    uppy: uppy // FIXME This is confusing, it's actually the Dashboard's plugin ID
+    ,
+    id: id,
+    error: error // TODO move this to context
+    ,
+    i18n: i18n // features
+    ,
+    acquirers: acquirers,
+    resumableUploads: resumableUploads,
+    individualCancellation: individualCancellation // visual options
+    ,
+    hideRetryButton: hideRetryButton,
+    hidePauseResumeButton: hidePauseResumeButton,
+    hideCancelButton: hideCancelButton,
+    showLinkToFileUploadResult: showLinkToFileUploadResult,
+    showRemoveButtonAfterComplete: showRemoveButtonAfterComplete,
+    isWide: isWide,
+    metaFields: metaFields,
+    recoveredState: recoveredState,
+    isSingleFile: isSingleFile,
+    containerWidth: containerWidth,
+    containerHeight: containerHeight // callbacks
+    ,
+    toggleFileCard: toggleFileCard,
+    handleRequestThumbnail: handleRequestThumbnail,
+    handleCancelThumbnail: handleCancelThumbnail,
     role: "listitem",
-    openFileEditor: props.openFileEditor,
-    canEditFile: props.canEditFile,
-    toggleAddFilesPanel: props.toggleAddFilesPanel,
-    file: props.files[fileID]
-  }))));
+    openFileEditor: openFileEditor,
+    canEditFile: canEditFile,
+    toggleAddFilesPanel: toggleAddFilesPanel,
+    file: files[fileID]
+  })));
 
-  if (props.singleFile) {
+  if (isSingleFile) {
     return h("div", {
@@ -87,0 +110,0 @@ class: "uppy-Dashboard-files"

lib/Dashboard.js

@@ -21,3 +21,3 @@ function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; }
 const packageJson = {
-  "version": "3.3.2"
+  "version": "3.4.0"
 };
@@ -405,3 +405,4 @@ import locale from './locale.js';
 
-        if ( // if ResizeObserver hasn't yet fired,
+        if ( // We might want to enable this in the future
+        // if ResizeObserver hasn't yet fired,
         !pluginState.areInsidesReadyToBeVisible // and it's not due to the modal being closed
@@ -630,4 +631,5 @@ && !isModalAndClosed) {
         }
-      }; // Add all dropped files
+      };
 
+      this.uppy.log('[Dashboard] Processing dropped files'); // Add all dropped files
 
@@ -991,2 +993,3 @@ const files = await getDroppedFiles(event.dataTransfer, {
         nativeCameraFacingMode: this.opts.nativeCameraFacingMode,
+        singleFileFullScreen: this.opts.singleFileFullScreen,
         handleCancelRestore: this.handleCancelRestore,
@@ -1172,2 +1175,3 @@ handleRequestThumbnail: this.handleRequestThumbnail,
       closeAfterFinish: false,
+      singleFileFullScreen: true,
       disableStatusBar: false,
@@ -1174,0 +1178,0 @@ disableInformer: false,

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "license": "MIT",
@@ -27,7 +27,7 @@ "main": "lib/index.js",
     "@transloadit/prettier-bytes": "0.0.7",
-    "@uppy/informer": "^3.0.1",
-    "@uppy/provider-views": "^3.2.0",
-    "@uppy/status-bar": "^3.1.0",
-    "@uppy/thumbnail-generator": "^3.0.2",
-    "@uppy/utils": "^5.2.0",
+    "@uppy/informer": "^3.0.2",
+    "@uppy/provider-views": "^3.3.0",
+    "@uppy/status-bar": "^3.1.1",
+    "@uppy/thumbnail-generator": "^3.0.3",
+    "@uppy/utils": "^5.3.0",
     "classnames": "^2.2.6",
@@ -42,9 +42,9 @@ "is-shallow-equal": "^1.0.1",
     "@jest/globals": "^29.0.0",
-    "@uppy/google-drive": "^3.1.0",
-    "@uppy/status-bar": "^3.1.0",
+    "@uppy/google-drive": "^3.1.1",
+    "@uppy/status-bar": "^3.1.1",
     "resize-observer-polyfill": "^1.5.0"
   },
   "peerDependencies": {
-    "@uppy/core": "^3.1.2"
+    "@uppy/core": "^3.2.0"
   }
 }

README.md

 # @uppy/dashboard
 
-<img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" width="120" alt="Uppy logo: a superman puppy in a pink suit" align="right">
+<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right">
 
@@ -5,0 +5,0 @@ [![npm version](https://img.shields.io/npm/v/@uppy/dashboard.svg?style=flat-square)](https://www.npmjs.com/package/@uppy/dashboard)

src/components/Dashboard.jsx

@@ -19,9 +19,13 @@ import { h } from 'preact'
 const WIDTH_MD = 576
-const HEIGHT_MD = 400
 
+const HEIGHT_MD = 330
+// We might want to enable this in the future
+// const HEIGHT_LG = 400
+// const HEIGHT_XL = 460
+
 export default function Dashboard (props) {
-  const noFiles = props.totalFileCount === 0
-  const singleFile = props.totalFileCount === 1
-
+  const isNoFiles = props.totalFileCount === 0
+  const isSingleFile = props.totalFileCount === 1
   const isSizeMD = props.containerWidth > WIDTH_MD
+  const isSizeHeightMD = props.containerHeight > HEIGHT_MD
 
@@ -39,5 +43,9 @@ const dashboardClassName = classNames({
     'uppy-size--height-md': props.containerHeight > HEIGHT_MD,
+    // We might want to enable this in the future
+    // 'uppy-size--height-lg': props.containerHeight > HEIGHT_LG,
+    // 'uppy-size--height-xl': props.containerHeight > HEIGHT_XL,
     'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel,
     'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible,
-    'uppy-Dashboard--singleFile': singleFile,
+    // Only enable “centered single file” mode when Dashboard is tall enough
+    'uppy-Dashboard--singleFile': props.singleFileFullScreen && isSingleFile && isSizeHeightMD,
   })
@@ -55,3 +63,3 @@
 
-  const showFileList = props.showSelectedFiles && !noFiles
+  const showFileList = props.showSelectedFiles && !isNoFiles
 
@@ -142,5 +150,25 @@ const numberOfFilesForRecovery = props.recoveredState ? Object.keys(props.recoveredState.files).length : null
             <FileList
-              // eslint-disable-next-line react/jsx-props-no-spreading
-              {...props}
-              singleFile={singleFile}
+              id={props.id}
+              error={props.error}
+              i18n={props.i18n}
+              uppy={props.uppy}
+              files={props.files}
+              acquirers={props.acquirers}
+              resumableUploads={props.resumableUploads}
+              hideRetryButton={props.hideRetryButton}
+              hidePauseResumeButton={props.hidePauseResumeButton}
+              hideCancelButton={props.hideCancelButton}
+              showLinkToFileUploadResult={props.showLinkToFileUploadResult}
+              showRemoveButtonAfterComplete={props.showRemoveButtonAfterComplete}
+              isWide={props.isWide}
+              metaFields={props.metaFields}
+              toggleFileCard={props.toggleFileCard}
+              handleRequestThumbnail={props.handleRequestThumbnail}
+              handleCancelThumbnail={props.handleCancelThumbnail}
+              recoveredState={props.recoveredState}
+              individualCancellation={props.individualCancellation}
+              openFileEditor={props.openFileEditor}
+              canEditFile={props.canEditFile}
+              toggleAddFilesPanel={props.toggleAddFilesPanel}
+              isSingleFile={isSingleFile}
               itemsPerRow={itemsPerRow}
@@ -147,0 +175,0 @@ />

src/components/FileItem/FileInfo/index.jsx

@@ -10,4 +10,4 @@ import {  h, Fragment  } from 'preact'
   function getMaxNameLength () {
-    if (props.singleFile) {
-      return 200
+    if (props.isSingleFile && props.containerHeight >= 350) {
+      return 90
     }
@@ -14,0 +14,0 @@ if (props.containerWidth <= 352) {

src/components/FileItem/FilePreviewAndLink/index.jsx

@@ -7,28 +7,31 @@ import { h } from 'preact'
 export default function FilePreviewAndLink (props) {
+  const { file, i18n, toggleFileCard, metaFields, showLinkToFileUploadResult } = props
+  const white = 'rgba(255, 255, 255, 0.5)'
+  const previewBackgroundColor = file.preview ? white : getFileTypeIcon(props.file.type).color
+
   return (
     <div
       className="uppy-Dashboard-Item-previewInnerWrap"
-      style={{ backgroundColor: getFileTypeIcon(props.file.type).color }}
+      style={{ backgroundColor: previewBackgroundColor }}
     >
       {
-        props.showLinkToFileUploadResult
-        && props.file.uploadURL
+        showLinkToFileUploadResult && file.uploadURL
           && (
           <a
             className="uppy-Dashboard-Item-previewLink"
-            href={props.file.uploadURL}
+            href={file.uploadURL}
             rel="noreferrer noopener"
             target="_blank"
-            aria-label={props.file.meta.name}
+            aria-label={file.meta.name}
           >
-            <span hidden>{props.file.meta.name}</span>
+            <span hidden>{file.meta.name}</span>
           </a>
           )
       }
-      <FilePreview file={props.file} />
+      <FilePreview file={file} />
       <MetaErrorMessage
-        file={props.file}
-        i18n={props.i18n}
-        toggleFileCard={props.toggleFileCard}
-        metaFields={props.metaFields}
+        file={file}
+        i18n={i18n}
+        toggleFileCard={toggleFileCard}
+        metaFields={metaFields}
       />
@@ -35,0 +38,0 @@ </div>

src/components/FileItem/index.jsx

@@ -105,2 +105,3 @@ import {  h, Component  } from 'preact'
             containerWidth={this.props.containerWidth}
+            containerHeight={this.props.containerHeight}
             i18n={this.props.i18n}
@@ -110,3 +111,3 @@ toggleAddFilesPanel={this.props.toggleAddFilesPanel}
             metaFields={this.props.metaFields}
-            singleFile={this.props.singleFile}
+            isSingleFile={this.props.isSingleFile}
           />
@@ -113,0 +114,0 @@ <Buttons

src/components/FileList.jsx

 import { h } from 'preact'
+import { useMemo } from 'preact/hooks'
 import FileItem from './FileItem/index.jsx'
@@ -20,6 +21,11 @@ import VirtualList from './VirtualList.jsx'
 
-export default (props) => {
+export default ({
+  id, error, i18n, uppy, files, acquirers, resumableUploads, hideRetryButton, hidePauseResumeButton, hideCancelButton,
+  showLinkToFileUploadResult, showRemoveButtonAfterComplete, isWide, metaFields, isSingleFile, toggleFileCard,
+  handleRequestThumbnail, handleCancelThumbnail, recoveredState, individualCancellation, itemsPerRow, openFileEditor,
+  canEditFile, toggleAddFilesPanel, containerWidth, containerHeight,
+}) => {
   // It's not great that this is hardcoded!
   // It's ESPECIALLY not great that this is checking against `itemsPerRow`!
-  const rowHeight = props.itemsPerRow === 1
+  const rowHeight = itemsPerRow === 1
     // Mobile
@@ -30,38 +36,11 @@ ? 71
 
-  const fileProps = {
-    // FIXME This is confusing, it's actually the Dashboard's plugin ID
-    id: props.id,
-    error: props.error,
-    // TODO move this to context
-    i18n: props.i18n,
-    uppy: props.uppy,
-    // features
-    acquirers: props.acquirers,
-    resumableUploads: props.resumableUploads,
-    individualCancellation: props.individualCancellation,
-    // visual options
-    hideRetryButton: props.hideRetryButton,
-    hidePauseResumeButton: props.hidePauseResumeButton,
-    hideCancelButton: props.hideCancelButton,
-    showLinkToFileUploadResult: props.showLinkToFileUploadResult,
-    showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,
-    isWide: props.isWide,
-    metaFields: props.metaFields,
-    recoveredState: props.recoveredState,
-    singleFile: props.singleFile,
-    // callbacks
-    toggleFileCard: props.toggleFileCard,
-    handleRequestThumbnail: props.handleRequestThumbnail,
-    handleCancelThumbnail: props.handleCancelThumbnail,
-  }
+  // Sort files by file.isGhost, ghost files first, only if recoveredState is present
+  const rows = useMemo(() => {
+    const sortByGhostComesFirst = (file1, file2) => files[file2].isGhost - files[file1].isGhost
 
-  const sortByGhostComesFirst = (file1, file2) => {
-    return props.files[file2].isGhost - props.files[file1].isGhost
-  }
+    const fileIds = Object.keys(files)
+    if (recoveredState) fileIds.sort(sortByGhostComesFirst)
+    return chunks(fileIds, itemsPerRow)
+  }, [files, itemsPerRow, recoveredState])
 
-  // Sort files by file.isGhost, ghost files first, only if recoveredState is present
-  const files = Object.keys(props.files)
-  if (props.recoveredState) files.sort(sortByGhostComesFirst)
-  const rows = chunks(files, props.itemsPerRow)
-
   const renderRow = (row) => (
@@ -75,9 +54,33 @@ // The `role="presentation` attribute ensures that the list items are properly
           key={fileID}
-          uppy={props.uppy}
-          {...fileProps} // eslint-disable-line react/jsx-props-no-spreading
+          uppy={uppy}
+          // FIXME This is confusing, it's actually the Dashboard's plugin ID
+          id={id}
+          error={error}
+          // TODO move this to context
+          i18n={i18n}
+          // features
+          acquirers={acquirers}
+          resumableUploads={resumableUploads}
+          individualCancellation={individualCancellation}
+          // visual options
+          hideRetryButton={hideRetryButton}
+          hidePauseResumeButton={hidePauseResumeButton}
+          hideCancelButton={hideCancelButton}
+          showLinkToFileUploadResult={showLinkToFileUploadResult}
+          showRemoveButtonAfterComplete={showRemoveButtonAfterComplete}
+          isWide={isWide}
+          metaFields={metaFields}
+          recoveredState={recoveredState}
+          isSingleFile={isSingleFile}
+          containerWidth={containerWidth}
+          containerHeight={containerHeight}
+          // callbacks
+          toggleFileCard={toggleFileCard}
+          handleRequestThumbnail={handleRequestThumbnail}
+          handleCancelThumbnail={handleCancelThumbnail}
           role="listitem"
-          openFileEditor={props.openFileEditor}
-          canEditFile={props.canEditFile}
-          toggleAddFilesPanel={props.toggleAddFilesPanel}
-          file={props.files[fileID]}
+          openFileEditor={openFileEditor}
+          canEditFile={canEditFile}
+          toggleAddFilesPanel={toggleAddFilesPanel}
+          file={files[fileID]}
         />
@@ -88,3 +91,3 @@ ))}
 
-  if (props.singleFile) {
+  if (isSingleFile) {
     return (
@@ -91,0 +94,0 @@ <div class="uppy-Dashboard-files">

src/Dashboard.jsx

@@ -83,2 +83,3 @@ import { h } from 'preact'
       closeAfterFinish: false,
+      singleFileFullScreen: true,
       disableStatusBar: false,
@@ -426,3 +427,4 @@ disableInformer: false,
       const isModalAndClosed = !this.opts.inline && pluginState.isHidden
-      if (
+      if (// We might want to enable this in the future
+
         // if ResizeObserver hasn't yet fired,
@@ -658,2 +660,4 @@ !pluginState.areInsidesReadyToBeVisible
 
+    this.uppy.log('[Dashboard] Processing dropped files')
+
     // Add all dropped files
@@ -1010,2 +1014,3 @@ const files = await getDroppedFiles(event.dataTransfer, { logDropError })
       nativeCameraFacingMode: this.opts.nativeCameraFacingMode,
+      singleFileFullScreen: this.opts.singleFileFullScreen,
       handleCancelRestore: this.handleCancelRestore,
@@ -1012,0 +1017,0 @@ handleRequestThumbnail: this.handleRequestThumbnail,

types/index.d.ts

@@ -29,2 +29,3 @@ import type { PluginOptions, UIPlugin, PluginTarget, UppyFile, IndexedObject } from '@uppy/core'
   closeAfterFinish?: boolean
+  centerSingleFile?: boolean
   closeModalOnClickOutside?: boolean
@@ -31,0 +32,0 @@ disableInformer?: boolean

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

687113

increased by1.56%

Lines of code

9868

increased by1.42%

Dependency changes

• Updated@uppy/informer@^3.0.2

• Updated@uppy/provider-views@^3.3.0

• Updated@uppy/status-bar@^3.1.1

• Updated@uppy/thumbnail-generator@^3.0.3

• Updated@uppy/utils@^5.3.0