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'`.