Status Bar and Dashboard: add “done” after upload is complete (#2653)

* add Done button

* move doneButtonHandler to options in Dashboard

* update docs

* revert for speed

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

@@ -125,6 +125,10 @@ module.exports = class Dashboard extends Plugin {
       hideRetryButton: false,
       hidePauseResumeButton: false,
       hideProgressAfterFinish: false,
+      doneButtonHandler: () => {
+        this.uppy.reset()
+        this.requestCloseModal()
+      },
       note: null,
       closeModalOnClickOutside: false,
       closeAfterFinish: false,
@@ -993,7 +997,8 @@ module.exports = class Dashboard extends Plugin {
         hideCancelButton: this.opts.hideCancelButton,
         showProgressDetails: this.opts.showProgressDetails,
         hideAfterFinish: this.opts.hideProgressAfterFinish,
-        locale: this.opts.locale
+        locale: this.opts.locale,
+        doneButtonHandler: this.opts.doneButtonHandler
       })
     }
 

packages/@uppy/status-bar/src/StatusBar.js

@@ -109,6 +109,8 @@ module.exports = (props) => {
 
   const showRetryBtn = error && !hideRetryButton
 
+  const showDoneBtn = props.doneButtonHandler && uploadState === statusBarStates.STATE_COMPLETE
+
   const progressClassNames = `uppy-StatusBar-progress
                            ${progressMode ? 'is-' + progressMode : ''}`
 
@@ -134,6 +136,7 @@ module.exports = (props) => {
         {showRetryBtn ? <RetryBtn {...props} /> : null}
         {showPauseResumeBtn ? <PauseResumeButton {...props} /> : null}
         {showCancelBtn ? <CancelBtn {...props} /> : null}
+        {showDoneBtn ? <DoneBtn {...props} /> : null}
       </div>
     </div>
   )
@@ -232,6 +235,20 @@ const PauseResumeButton = (props) => {
   )
 }
 
+const DoneBtn = (props) => {
+  const { i18n } = props
+  return (
+    <button
+      type="button"
+      class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--done"
+      onClick={props.doneButtonHandler}
+      data-uppy-super-focusable
+    >
+      {i18n('done')}
+    </button>
+  )
+}
+
 const LoadingSpinner = () => {
   return (
     <svg class="uppy-StatusBar-spinner" aria-hidden="true" focusable="false" width="14" height="14">

packages/@uppy/status-bar/src/index.js

@@ -30,6 +30,7 @@ module.exports = class StatusBar extends Plugin {
         cancel: 'Cancel',
         pause: 'Pause',
         resume: 'Resume',
+        done: 'Done',
         filesUploadedOfTotal: {
           0: '%{complete} of %{smart_count} file uploaded',
           1: '%{complete} of %{smart_count} files uploaded'
@@ -59,7 +60,8 @@ module.exports = class StatusBar extends Plugin {
       hidePauseResumeButton: false,
       hideCancelButton: false,
       showProgressDetails: false,
-      hideAfterFinish: true
+      hideAfterFinish: true,
+      doneButtonHandler: null
     }
 
     this.opts = { ...defaultOptions, ...opts }
@@ -226,6 +228,7 @@ module.exports = class StatusBar extends Plugin {
       retryAll: this.uppy.retryAll,
       cancelAll: this.uppy.cancelAll,
       startUpload: this.startUpload,
+      doneButtonHandler: this.opts.doneButtonHandler,
       resumableUploads,
       supportsUploadProgress,
       showProgressDetails: this.opts.showProgressDetails,

packages/@uppy/status-bar/src/style.scss

@@ -312,6 +312,21 @@
     }
   }
 
+  .uppy-StatusBar-actionBtn--done {
+    @include highlight-focus;
+    line-height: 1;
+    border-radius: 3px;
+    padding: 7px 8px;
+
+    [data-uppy-theme="dark"] & {
+      color: $highlight--dark;
+    }
+  }
+
+  .uppy-size--md .uppy-StatusBar-actionBtn--done {
+    font-size: 14px;
+  }
+
 .uppy-StatusBar-details {
   line-height: 12px;
   width: 13px;

website/src/docs/dashboard.md

@@ -80,6 +80,10 @@ uppy.use(Dashboard, {
   hidePauseResumeButton: false,
   hideCancelButton: false,
   hideProgressAfterFinish: false,
+  doneButtonHandler: () => {
+    this.uppy.reset()
+    this.requestCloseModal()
+  },
   note: null,
   closeModalOnClickOutside: false,
   closeAfterFinish: false,
@@ -184,6 +188,19 @@ Use this if you are providing a custom retry button somewhere, and using the `up
 
 Hide Status Bar after the upload has finished.
 
+### `doneButtonHandler`
+
+This option is passed to the StatusBar, and will render a “Done” button in place of pause/resume/cancel buttons, once the upload/encoding is done. The behaviour of this “Done” button is defined by the handler function — can be used to close file picker modals or clear the upload state. This is what the Dashboard sets by default:
+
+```js
+doneButtonHandler: () => {
+  this.uppy.reset()
+  this.requestCloseModal()
+}
+```
+
+Set to `null` to disable the “Done” button.
+
 ### `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.

website/src/docs/statusbar.md

@@ -65,6 +65,7 @@ uppy.use(StatusBar, {
   hideRetryButton: false,
   hidePauseResumeButton: false,
   hideCancelButton: false,
+  doneButtonHandler: null,
   locale: {}
 })
 ```
@@ -104,6 +105,17 @@ Hide pause/resume buttons (for resumable uploads, via [tus](http://tus.io), for
 
 Hide the cancel button. Use this if you are providing a custom retry button somewhere, and using the `uppy.cancelAll()` API.
 
+### `doneButtonHandler`
+
+If passed a function, Status Bar will render a “Done” button in place of pause/resume/cancel buttons, once the upload/encoding is done. The behaviour of this “Done” button is defined by the handler function — can be used to close file picker modals or clear the upload state. This is what the Dashboard plugin, which uses Status Bar internally, sets:
+
+```js
+doneButtonHandler: () => {
+  this.uppy.reset()
+  this.requestCloseModal()
+}
+```
+
 ### `locale: {}`
 
 Localize text that is shown to the user.
@@ -124,14 +136,12 @@ strings: {
   retry: 'Retry',
   // Used as the label for the button that cancels an upload.
   cancel: 'Cancel',
-  // Used as the screen reader label for the button that retries an upload.
-  retryUpload: 'Retry upload',
-  // Used as the screen reader label for the button that pauses an upload.
-  pauseUpload: 'Pause upload',
-  // Used as the screen reader label for the button that resumes a paused upload.
-  resumeUpload: 'Resume upload',
-  // Used as the screen reader label for the button that cancels an upload.
-  cancelUpload: 'Cancel upload',
+  // Used as the label for the button that pauses an upload.
+  pause: 'Pause',
+  // Used as the label for the button that resumes an upload.
+  resume: 'Resume',
+  // Used as the label for the button that resets the upload state after an upload
+  done: 'Done',
   // When `showProgressDetails` is set, shows the number of files that have been fully uploaded so far.
   filesUploadedOfTotal: {
     0: '%{complete} of %{smart_count} file uploaded',