Dashboard: add options to show remove button after complete (#2284)

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js

@@ -42,7 +42,7 @@ function RemoveButton ({ i18n, onClick }) {
   )
 }
 
-const copyLinkToClipboard = (event, props) =>
+const copyLinkToClipboard = (event, props) => {
   copyToClipboard(props.file.uploadURL, props.i18n('copyLinkToClipboardFallback'))
     .then(() => {
       props.log('Link copied to clipboard.')
@@ -51,6 +51,7 @@ const copyLinkToClipboard = (event, props) =>
     .catch(props.log)
     // avoid losing focus
     .then(() => event.target.focus({ preventScroll: true }))
+}
 
 function CopyLinkButton (props) {
   return (
@@ -93,7 +94,9 @@ module.exports = function Buttons (props) {
     showRemoveButton,
     i18n,
     removeFile,
-    toggleFileCard
+    toggleFileCard,
+    log,
+    info
   } = props
 
   return (
@@ -112,7 +115,12 @@ module.exports = function Buttons (props) {
         onClick={() => toggleFileCard(file.id)}
       />
       {showLinkToFileUploadResult && file.uploadURL ? (
-        <CopyLinkButton i18n={i18n} />
+        <CopyLinkButton
+          file={file}
+          i18n={i18n}
+          info={info}
+          log={log}
+        />
       ) : null}
       {showRemoveButton ? (
         <RemoveButton

packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.js

@@ -43,7 +43,8 @@ function progressIndicatorTitle (props) {
 }
 
 module.exports = function FileProgress (props) {
-  if (props.hideRetryButton && props.error) {
+  if ((props.hideRetryButton && props.error) ||
+      (props.isUploaded && props.showRemoveButtonAfterComplete)) {
     return <div class="uppy-DashboardItem-progress" />
   } else if (
     props.isUploaded ||

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

@@ -35,10 +35,14 @@ module.exports = class FileItem extends Component {
     const isPaused = file.isPaused || false
     const error = file.error || false
 
-    const showRemoveButton = this.props.individualCancellation
+    let showRemoveButton = this.props.individualCancellation
       ? !isUploaded
       : !uploadInProgress && !isUploaded
 
+    if (isUploaded && this.props.showRemoveButtonAfterComplete) {
+      showRemoveButton = true
+    }
+
     const dashboardItemClass = classNames({
       'uppy-u-reset': true,
       'uppy-DashboardItem': true,
@@ -69,6 +73,7 @@ module.exports = class FileItem extends Component {
 
             hideRetryButton={this.props.hideRetryButton}
             hidePauseResumeCancelButtons={this.props.hidePauseResumeCancelButtons}
+            showRemoveButtonAfterComplete={this.props.showRemoveButtonAfterComplete}
 
             resumableUploads={this.props.resumableUploads}
             individualCancellation={this.props.individualCancellation}

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

@@ -49,6 +49,7 @@ module.exports = (props) => {
     hideRetryButton: props.hideRetryButton,
     hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons,
     showLinkToFileUploadResult: props.showLinkToFileUploadResult,
+    showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,
     isWide: props.isWide,
     metaFields: props.metaFields,
     // callbacks

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

@@ -121,6 +121,7 @@ module.exports = class Dashboard extends Plugin {
       proudlyDisplayPoweredByUppy: true,
       onRequestCloseModal: () => this.closeModal(),
       showSelectedFiles: true,
+      showRemoveButtonAfterComplete: false,
       browserBackButtonClose: false,
       theme: 'light'
     }
@@ -852,6 +853,7 @@ module.exports = class Dashboard extends Plugin {
       showLinkToFileUploadResult: this.opts.showLinkToFileUploadResult,
       proudlyDisplayPoweredByUppy: this.opts.proudlyDisplayPoweredByUppy,
       hideCancelButton: this.opts.hideCancelButton,
+      showRemoveButtonAfterComplete: this.opts.showRemoveButtonAfterComplete,
       containerWidth: pluginState.containerWidth,
       containerHeight: pluginState.containerHeight,
       areInsidesReadyToBeVisible: pluginState.areInsidesReadyToBeVisible,

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

@@ -42,6 +42,7 @@ declare module Dashboard {
     showLinkToFileUploadResult?: boolean
     showProgressDetails?: boolean
     showSelectedFiles?: boolean
+    showRemoveButtonAfterComplete?: boolean
     replaceTargetContent?: boolean
     target?: Uppy.PluginTarget
     theme?: 'auto' | 'dark' | 'light'

website/src/docs/dashboard.md

@@ -91,6 +91,7 @@ uppy.use(Dashboard, {
   proudlyDisplayPoweredByUppy: true,
   onRequestCloseModal: () => this.closeModal(),
   showSelectedFiles: true,
+  showRemoveButtonAfterComplete: false,
   locale: defaultLocale,
   browserBackButtonClose: false,
   theme: 'light'
@@ -188,6 +189,10 @@ Show the list (grid) of selected files with preview and file name. In case you a
 
 See also `disableStatusBar` option, which can hide the progress and upload button.
 
+### `showRemoveButtonAfterComplete: false`
+
+Sometimes you might want to let users remove an uploaded file. Enabling this option only shows the remove `X` button in the Dashboard UI, but to actually send a request you should listen to [`file-removed`](https://uppy.io/docs/uppy/#file-removed) event and add your logic there.
+
 ### `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'`.