Merge pull request #1055 from transloadit/feature/dashboard-showSelectedFiles

[Dashboard] add showSelectedFiles option

packages/@uppy/dashboard/src/components/Dashboard.js

@@ -18,6 +18,7 @@ module.exports = function Dashboard (props) {
   // }
 
   const noFiles = props.totalFileCount === 0
+
   const dashboardClassName = classNames(
     { 'uppy-Root': props.isTargetDOMEl },
     'uppy-Dashboard',
@@ -25,7 +26,6 @@ module.exports = function Dashboard (props) {
     { 'uppy-Dashboard--animateOpenClose': props.animateOpenClose },
     { 'uppy-Dashboard--isClosing': props.isClosing },
     { 'uppy-Dashboard--modal': !props.inline },
-    // { 'uppy-Dashboard--wide': props.isWide },
     { 'uppy-size--md': props.containerWidth > 576 },
     { 'uppy-size--lg': props.containerWidth > 700 },
     { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel }
@@ -55,9 +55,13 @@ module.exports = function Dashboard (props) {
         </button>
 
         <div class="uppy-Dashboard-innerWrap">
-          { !noFiles && <PanelTopBar {...props} /> }
+          { (!noFiles && props.showSelectedFiles) && <PanelTopBar {...props} /> }
 
-          { noFiles ? <AddFiles {...props} /> : <FileList {...props} /> }
+          { props.showSelectedFiles ? (
+            noFiles ? <AddFiles {...props} /> : <FileList {...props} />
+          ) : (
+            <AddFiles {...props} />
+          )}
 
           <PreactCSSTransitionGroup
             transitionName="uppy-transition-slideDownUp"

packages/@uppy/dashboard/src/index.js

@@ -124,6 +124,7 @@ module.exports = class Dashboard extends Plugin {
       animateOpenClose: true,
       proudlyDisplayPoweredByUppy: true,
       onRequestCloseModal: () => this.closeModal(),
+      showSelectedFiles: true,
       locale: defaultLocale,
       browserBackButtonClose: false
     }
@@ -626,7 +627,8 @@ module.exports = class Dashboard extends Plugin {
       containerWidth: pluginState.containerWidth,
       isTargetDOMEl: this.isTargetDOMEl,
       allowedFileTypes: this.uppy.opts.restrictions.allowedFileTypes,
-      maxNumberOfFiles: this.uppy.opts.restrictions.maxNumberOfFiles
+      maxNumberOfFiles: this.uppy.opts.restrictions.maxNumberOfFiles,
+      showSelectedFiles: this.opts.showSelectedFiles
     })
   }
 

website/src/docs/dashboard.md

@@ -66,6 +66,8 @@ uppy.use(Dashboard, {
   showLinkToFileUploadResult: true,
   showProgressDetails: false,
   hideUploadButton: false,
+  hideRetryButton: false,
+  hidePauseResumeCancelButtons: false,
   hideProgressAfterFinish: false,
   note: null,
   closeModalOnClickOutside: false,
@@ -73,9 +75,12 @@ uppy.use(Dashboard, {
   disableInformer: false,
   disableThumbnailGenerator: false,
   disablePageScrollWhenModalOpen: true,
+  animateOpenClose: true,
   proudlyDisplayPoweredByUppy: true,
   onRequestCloseModal: () => this.closeModal(),
-  locale: {}
+  showSelectedFiles: true,
+  locale: defaultLocale,
+  browserBackButtonClose: false
 })
 ```
 
@@ -144,6 +149,12 @@ Hide the cancel or pause/resume buttons (for resumable uploads, via [tus](http:/
 
 Hide StatusBar after the upload has finished.
 
+### `showSelectedFiles: true`
+
+Show the list (grid) of selected files with preview and file name. In case you are showing selected files in your own app’s UI and want the Uppy Dashboard to just be a picker, the list can be hidden with this option.
+
+See also `disableStatusBar` option, which can hide the progress and upload button.
+
 ### `note: null`
 
 Optionally, specify a string of text that explains something about the upload for the user. This is a place to explain any `restrictions` that are put in place. For example: `'Images and video only, 2–3 files, up to 1 MB'`.