diff --git a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js index a814bc8870..a5d14c4dc1 100644 --- a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js +++ b/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 ? ( - + ) : null} {showRemoveButton ? ( } else if ( props.isUploaded || diff --git a/packages/@uppy/dashboard/src/components/FileItem/index.js b/packages/@uppy/dashboard/src/components/FileItem/index.js index 4e1dd055f4..83875234ee 100644 --- a/packages/@uppy/dashboard/src/components/FileItem/index.js +++ b/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} diff --git a/packages/@uppy/dashboard/src/components/FileList.js b/packages/@uppy/dashboard/src/components/FileList.js index 8f76b411bb..388b214de3 100644 --- a/packages/@uppy/dashboard/src/components/FileList.js +++ b/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 diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index ae79a85180..50bc081312 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/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, diff --git a/packages/@uppy/dashboard/types/index.d.ts b/packages/@uppy/dashboard/types/index.d.ts index bfb59dda27..9d12f41c90 100644 --- a/packages/@uppy/dashboard/types/index.d.ts +++ b/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' diff --git a/website/src/docs/dashboard.md b/website/src/docs/dashboard.md index d8a17b3663..7e3c6da38e 100644 --- a/website/src/docs/dashboard.md +++ b/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'`.