From 4b48aac78f69a8d9ed57b379e5761002c44c3b17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Thu, 6 Sep 2018 13:50:36 +0200 Subject: [PATCH 1/8] Dashboard: Auto close after finish using `closeAfterFinish: true` --- packages/@uppy/dashboard/src/index.js | 12 +++++++++++- website/src/docs/dashboard.md | 5 +++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index 3828678d0..4077cb3ce 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -117,6 +117,7 @@ module.exports = class Dashboard extends Plugin { hideProgressAfterFinish: false, note: null, closeModalOnClickOutside: false, + closeAfterFinish: false, disableStatusBar: false, disableInformer: false, disableThumbnailGenerator: false, @@ -458,7 +459,16 @@ module.exports = class Dashboard extends Plugin { this.uppy.on('plugin-remove', this.removeTarget) this.uppy.on('file-added', (ev) => { this.toggleAddFilesPanel(false) - this.hideAllPanels() + }) + this.uppy.on('complete', ({ uploadID }) => { + const { currentUploads } = this.uppy.getState() + if (this.opts.closeAfterFinish && + // This is the very last upload still in state + // (and will be removed by core after this handler is complete) + Object.keys(currentUploads).length === 1 && currentUploads[uploadID]) { + // All uploads are done + this.requestCloseModal() + } }) } diff --git a/website/src/docs/dashboard.md b/website/src/docs/dashboard.md index 77a6bb596..85837078e 100644 --- a/website/src/docs/dashboard.md +++ b/website/src/docs/dashboard.md @@ -71,6 +71,7 @@ uppy.use(Dashboard, { hideProgressAfterFinish: false, note: null, closeModalOnClickOutside: false, + closeAfterFinish: false, disableStatusBar: false, disableInformer: false, disableThumbnailGenerator: false, @@ -184,6 +185,10 @@ Note that this metadata will only be set on a file object if it is entered by th Set to true to automatically close the modal when the user clicks outside of it. +### `closeAfterFinish: false` + +Set to true to automatically close the modal when all current uploads are complete. You can use this together with the [`allowMultipleUploads: false`](/docs/uppy#allowMultipleUploads-true) option in Uppy Core to create a smooth experience when uploading a single (batch of) file(s). + ### `disablePageScrollWhenModalOpen: true` Page scrolling is disabled by default when the Dashboard modal is open, so when you scroll a list of files in Uppy, the website in the background stays still. Set to false to override this behaviour and leave page scrolling intact. From e20dade3a0d54b9985019bcc033ecc3450c279a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Mon, 8 Oct 2018 13:17:12 +0200 Subject: [PATCH 2/8] dashboard: Warn if closeAfterFinish and allowMultipleUploads are both true --- packages/@uppy/dashboard/src/index.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index 4077cb3ce..961b815a4 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -460,12 +460,8 @@ module.exports = class Dashboard extends Plugin { this.uppy.on('file-added', (ev) => { this.toggleAddFilesPanel(false) }) - this.uppy.on('complete', ({ uploadID }) => { - const { currentUploads } = this.uppy.getState() - if (this.opts.closeAfterFinish && - // This is the very last upload still in state - // (and will be removed by core after this handler is complete) - Object.keys(currentUploads).length === 1 && currentUploads[uploadID]) { + this.uppy.on('complete', ({ failed, uploadID }) => { + if (this.opts.closeAfterFinish && failed.length === 0) { // All uploads are done this.requestCloseModal() } @@ -663,7 +659,13 @@ module.exports = class Dashboard extends Plugin { targets: [] }) - const target = this.opts.target + const { closeAfterFinish } = this.opts + const { allowMultipleUploads } = this.uppy.opts + if (allowMultipleUploads && closeAfterFinish) { + this.uppy.log('[Dashboard] When using `closeAfterFinish`, we recommended setting the `allowMultipleUploads` option to `false` in the Uppy constructor. See https://uppy.io/docs/uppy/#allowMultipleUploads-true', 'warning') + } + + const { target } = this.opts if (target) { this.mount(target, this) } From cf5834fc32244f92bced392d55f2e55d844c5725 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Thu, 11 Oct 2018 14:02:27 +0200 Subject: [PATCH 3/8] EMPHASIS --- website/src/docs/dashboard.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/src/docs/dashboard.md b/website/src/docs/dashboard.md index 85837078e..060b3ebee 100644 --- a/website/src/docs/dashboard.md +++ b/website/src/docs/dashboard.md @@ -189,6 +189,8 @@ Set to true to automatically close the modal when the user clicks outside of it. Set to true to automatically close the modal when all current uploads are complete. You can use this together with the [`allowMultipleUploads: false`](/docs/uppy#allowMultipleUploads-true) option in Uppy Core to create a smooth experience when uploading a single (batch of) file(s). +> Setting [`allowMultipleUploads: false`](/docs/uppy#allowMultipleUploads-true) is **strongly** recommended when using this option. With multiple upload batches, the auto-closing behavior can be very confusing for users. + ### `disablePageScrollWhenModalOpen: true` Page scrolling is disabled by default when the Dashboard modal is open, so when you scroll a list of files in Uppy, the website in the background stays still. Set to false to override this behaviour and leave page scrolling intact. From a44cafe8516e76cb4b34a43b812d6b107d6de01c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Thu, 11 Oct 2018 14:18:32 +0200 Subject: [PATCH 4/8] Note about failed uploads behaviour --- website/src/docs/dashboard.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/website/src/docs/dashboard.md b/website/src/docs/dashboard.md index 060b3ebee..f6ff2a858 100644 --- a/website/src/docs/dashboard.md +++ b/website/src/docs/dashboard.md @@ -189,6 +189,8 @@ Set to true to automatically close the modal when the user clicks outside of it. Set to true to automatically close the modal when all current uploads are complete. You can use this together with the [`allowMultipleUploads: false`](/docs/uppy#allowMultipleUploads-true) option in Uppy Core to create a smooth experience when uploading a single (batch of) file(s). +With this option, the modal is only automatically closed when uploads are complete _and successful_. If some uploads failed, the modal stays open so the user can retry failed uploads or cancel the current batch and upload an entirely different set of files instead. + > Setting [`allowMultipleUploads: false`](/docs/uppy#allowMultipleUploads-true) is **strongly** recommended when using this option. With multiple upload batches, the auto-closing behavior can be very confusing for users. ### `disablePageScrollWhenModalOpen: true` From 18abb9ea716e3d114712c66f2f77499bae2ad878 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Mon, 15 Oct 2018 12:52:14 +0200 Subject: [PATCH 5/8] dashboard: Throw if closeAfterFinish is used together with inline:true. --- packages/@uppy/dashboard/src/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index 961b815a4..32d2dfe9b 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -659,7 +659,11 @@ module.exports = class Dashboard extends Plugin { targets: [] }) - const { closeAfterFinish } = this.opts + const { inline, closeAfterFinish } = this.opts + if (inline && closeAfterFinish) { + throw new Error('[Dashboard] `closeAfterFinish: true` cannot be used on an inline Dashboard, because an inline Dashboard cannot be closed at all. Either set `inline: false`, or disable the `closeAfterFinish` option.') + } + const { allowMultipleUploads } = this.uppy.opts if (allowMultipleUploads && closeAfterFinish) { this.uppy.log('[Dashboard] When using `closeAfterFinish`, we recommended setting the `allowMultipleUploads` option to `false` in the Uppy constructor. See https://uppy.io/docs/uppy/#allowMultipleUploads-true', 'warning') From ecd7b64f3dfb42783b80af034178deebf7b9a56c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Tue, 23 Oct 2018 15:35:07 +0200 Subject: [PATCH 6/8] dashboard: Remove file-added and complete event handlers on uninstall. --- packages/@uppy/dashboard/src/index.js | 35 ++++++++++++++++----------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/packages/@uppy/dashboard/src/index.js b/packages/@uppy/dashboard/src/index.js index 32d2dfe9b..5a5e420d2 100644 --- a/packages/@uppy/dashboard/src/index.js +++ b/packages/@uppy/dashboard/src/index.js @@ -155,7 +155,9 @@ module.exports = class Dashboard extends Plugin { this.maintainFocus = this.maintainFocus.bind(this) this.initEvents = this.initEvents.bind(this) - this.onKeydown = this.onKeydown.bind(this) + this.handleKeyDown = this.handleKeyDown.bind(this) + this.handleFileAdded = this.handleFileAdded.bind(this) + this.handleComplete = this.handleComplete.bind(this) this.handleClickOutside = this.handleClickOutside.bind(this) this.toggleFileCard = this.toggleFileCard.bind(this) this.toggleAddFilesPanel = this.toggleAddFilesPanel.bind(this) @@ -317,7 +319,7 @@ module.exports = class Dashboard extends Plugin { } // handle ESC and TAB keys in modal dialog - document.addEventListener('keydown', this.onKeydown) + document.addEventListener('keydown', this.handleKeyDown) // this.rerender(this.uppy.getState()) this.setFocusToBrowse() @@ -351,7 +353,7 @@ module.exports = class Dashboard extends Plugin { } // handle ESC and TAB keys in modal dialog - document.removeEventListener('keydown', this.onKeydown) + document.removeEventListener('keydown', this.handleKeyDown) this.savedActiveElement.focus() @@ -370,7 +372,7 @@ module.exports = class Dashboard extends Plugin { return !this.getPluginState().isHidden || false } - onKeydown (event) { + handleKeyDown (event) { // close modal on esc key press if (event.keyCode === ESC_KEY) this.requestCloseModal(event) // maintainFocus on tab key press @@ -457,15 +459,19 @@ module.exports = class Dashboard extends Plugin { this.ro.observe(this.el.querySelector('.uppy-Dashboard-inner')) this.uppy.on('plugin-remove', this.removeTarget) - this.uppy.on('file-added', (ev) => { - this.toggleAddFilesPanel(false) - }) - this.uppy.on('complete', ({ failed, uploadID }) => { - if (this.opts.closeAfterFinish && failed.length === 0) { - // All uploads are done - this.requestCloseModal() - } - }) + this.uppy.on('file-added', this.handleFileAdded) + this.uppy.on('complete', this.handleComplete) + } + + handleFileAdded () { + this.toggleAddFilesPanel(false) + } + + handleComplete ({ failed, uploadID }) { + if (this.opts.closeAfterFinish && failed.length === 0) { + // All uploads are done + this.requestCloseModal() + } } removeEvents () { @@ -480,7 +486,8 @@ module.exports = class Dashboard extends Plugin { // window.removeEventListener('resize', this.throttledUpdateDashboardElWidth) window.removeEventListener('popstate', this.handlePopState, false) this.uppy.off('plugin-remove', this.removeTarget) - this.uppy.off('file-added', (ev) => this.toggleAddFilesPanel(false)) + this.uppy.off('file-added', this.handleFileAdded) + this.uppy.off('complete', this.handleComplete) } toggleFileCard (fileId) { From 6a0871dafe2ddff39581e3822ea96281824cb99f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Mon, 29 Oct 2018 10:55:06 +0100 Subject: [PATCH 7/8] Fix statusbar hiding too early with allowMultipleUploads:false --- packages/@uppy/status-bar/src/StatusBar.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index c9d3bd5a2..81cf36e4a 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -76,8 +76,7 @@ module.exports = (props) => { const width = typeof progressValue === 'number' ? progressValue : 100 const isHidden = (uploadState === statusBarStates.STATE_WAITING && props.hideUploadButton) || (uploadState === statusBarStates.STATE_WAITING && !props.newFiles > 0) || - (uploadState === statusBarStates.STATE_COMPLETE && props.hideAfterFinish) || - !props.allowNewUpload + (uploadState === statusBarStates.STATE_COMPLETE && props.hideAfterFinish) const progressClassNames = `uppy-StatusBar-progress ${progressMode ? 'is-' + progressMode : ''}` From 85364f8c22df9aa96103be8cfe99fc9d7085cab5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= Date: Mon, 29 Oct 2018 10:59:03 +0100 Subject: [PATCH 8/8] status-bar: Hide only the upload button when no new uploads are allowed --- packages/@uppy/status-bar/src/StatusBar.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js index 81cf36e4a..7ad909f28 100644 --- a/packages/@uppy/status-bar/src/StatusBar.js +++ b/packages/@uppy/status-bar/src/StatusBar.js @@ -78,6 +78,12 @@ module.exports = (props) => { (uploadState === statusBarStates.STATE_WAITING && !props.newFiles > 0) || (uploadState === statusBarStates.STATE_COMPLETE && props.hideAfterFinish) + const showUploadButton = props.newFiles && !props.hideUploadButton && props.allowNewUpload + const showRetryButton = props.error && !props.hideRetryButton + const showCancelButton = !props.hidePauseResumeCancelButtons && + uploadState !== statusBarStates.STATE_WAITING && + uploadState !== statusBarStates.STATE_COMPLETE + const progressClassNames = `uppy-StatusBar-progress ${progressMode ? 'is-' + progressMode : ''}` @@ -98,12 +104,9 @@ module.exports = (props) => { aria-valuenow={progressValue} /> {progressBarContent}
- { props.newFiles && !props.hideUploadButton ? : null } - { props.error && !props.hideRetryButton ? : null } - { !props.hidePauseResumeCancelButtons && uploadState !== statusBarStates.STATE_WAITING && uploadState !== statusBarStates.STATE_COMPLETE - ? - : null - } + { showUploadButton ? : null } + { showRetryButton ? : null } + { showCancelButton ? : null }
)