status-bar,dashboard: Hide upload/add button when no new files can be uploaded

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

@@ -380,7 +380,7 @@ class Uppy {
   * @param {object} file object to add
   */
   addFile (file) {
-    const { files } = this.getState()
+    const { files, allowNewUpload } = this.getState()
 
     const onError = (msg) => {
       const err = typeof msg === 'object' ? msg : new Error(msg)
@@ -389,6 +389,10 @@ class Uppy {
       throw err
     }
 
+    if (allowNewUpload === false) {
+      onError(new Error('Cannot add new files: already uploading.'))
+    }
+
     const onBeforeFileAddedResult = this.opts.onBeforeFileAdded(file, files)
 
     if (onBeforeFileAddedResult === false) {

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

@@ -7,9 +7,11 @@ function DashboardContentTitle (props) {
 }
 
 function PanelTopBar (props) {
-  const notOverFileLimit = props.maxNumberOfFiles
-    ? props.totalFileCount < props.maxNumberOfFiles
-    : true
+  let { allowNewUpload } = props.allowNewUpload
+  // TODO maybe this should be done in ../index.js, then just pass that down as `allowNewUpload`
+  if (allowNewUpload && props.maxNumberOfFiles) {
+    allowNewUpload = props.totalFileCount < props.maxNumberOfFiles
+  }
 
   return (
     <div class="uppy-DashboardContent-bar">
@@ -19,7 +21,7 @@ function PanelTopBar (props) {
       <div class="uppy-DashboardContent-title" role="heading" aria-level="h1">
         <DashboardContentTitle {...props} />
       </div>
-      { notOverFileLimit &&
+      { allowNewUpload &&
         <button class="uppy-DashboardContent-addMore"
           type="button"
           aria-label={props.i18n('addMoreFiles')}
@@ -30,7 +32,6 @@ function PanelTopBar (props) {
           </svg>
         </button>
       }
-
     </div>
   )
 }

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

@@ -508,7 +508,7 @@ module.exports = class Dashboard extends Plugin {
 
   render (state) {
     const pluginState = this.getPluginState()
-    const { files, capabilities } = state
+    const { files, capabilities, allowNewUpload } = state
 
     const newFiles = Object.keys(files).filter((file) => {
       return !files[file].progress.uploadStarted
@@ -576,13 +576,14 @@ module.exports = class Dashboard extends Plugin {
     }
 
     return DashboardUI({
-      state: state,
+      state,
       modal: pluginState,
-      newFiles: newFiles,
-      files: files,
+      newFiles,
+      files,
       totalFileCount: Object.keys(files).length,
       totalProgress: state.totalProgress,
-      acquirers: acquirers,
+      allowNewUpload,
+      acquirers,
       activePanel: pluginState.activePanel,
       animateOpenClose: this.opts.animateOpenClose,
       isClosing: pluginState.isClosing,
@@ -610,16 +611,16 @@ module.exports = class Dashboard extends Plugin {
       metaFields: pluginState.metaFields,
       resumableUploads: capabilities.resumableUploads || false,
       bundled: capabilities.bundled || false,
-      startUpload: startUpload,
+      startUpload,
       pauseUpload: this.uppy.pauseResume,
       retryUpload: this.uppy.retryUpload,
-      cancelUpload: cancelUpload,
+      cancelUpload,
       cancelAll: this.uppy.cancelAll,
       fileCardFor: pluginState.fileCardFor,
       toggleFileCard: this.toggleFileCard,
       toggleAddFilesPanel: this.toggleAddFilesPanel,
       showAddFilesPanel: pluginState.showAddFilesPanel,
-      saveFileCard: saveFileCard,
+      saveFileCard,
       width: this.opts.width,
       height: this.opts.height,
       showLinkToFileUploadResult: this.opts.showLinkToFileUploadResult,

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

@@ -76,7 +76,8 @@ 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)
+    (uploadState === statusBarStates.STATE_COMPLETE && props.hideAfterFinish) ||
+    !props.allowNewUpload
 
   const progressClassNames = `uppy-StatusBar-progress
                            ${progressMode ? 'is-' + progressMode : ''}`

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

@@ -135,7 +135,13 @@ module.exports = class StatusBar extends Plugin {
   }
 
   render (state) {
-    const files = state.files
+    const {
+      capabilities,
+      files,
+      allowNewUpload,
+      totalProgress,
+      error
+    } = state
 
     const uploadStartedFiles = Object.keys(files).filter((file) => {
       return files[file].progress.uploadStarted
@@ -184,7 +190,7 @@ module.exports = class StatusBar extends Plugin {
 
     const isUploadStarted = uploadStartedFiles.length > 0
 
-    const isAllComplete = state.totalProgress === 100 &&
+    const isAllComplete = totalProgress === 100 &&
       completeFiles.length === Object.keys(files).length &&
       processingFiles.length === 0
 
@@ -196,25 +202,26 @@ module.exports = class StatusBar extends Plugin {
       !isAllErrored &&
       uploadStartedFiles.length > 0
 
-    const resumableUploads = state.capabilities.resumableUploads || false
+    const resumableUploads = capabilities.resumableUploads || false
 
     return StatusBarUI({
-      error: state.error,
-      uploadState: this.getUploadingState(isAllErrored, isAllComplete, state.files || {}),
-      totalProgress: state.totalProgress,
-      totalSize: totalSize,
-      totalUploadedSize: totalUploadedSize,
+      error,
+      uploadState: this.getUploadingState(isAllErrored, isAllComplete, files || {}),
+      allowNewUpload,
+      totalProgress,
+      totalSize,
+      totalUploadedSize,
       uploadStarted: uploadStartedFiles.length,
-      isAllComplete: isAllComplete,
-      isAllPaused: isAllPaused,
-      isAllErrored: isAllErrored,
-      isUploadStarted: isUploadStarted,
+      isAllComplete,
+      isAllPaused,
+      isAllErrored,
+      isUploadStarted,
       complete: completeFiles.length,
       newFiles: newFiles.length,
       numUploads: startedFiles.length,
-      totalSpeed: totalSpeed,
-      totalETA: totalETA,
-      files: state.files,
+      totalSpeed,
+      totalETA,
+      files,
       i18n: this.i18n,
       pauseAll: this.uppy.pauseAll,
       resumeAll: this.uppy.resumeAll,

website/src/docs/uppy.md

@@ -36,6 +36,7 @@ The Uppy core module has the following configurable options:
 const uppy = Uppy({
   id: 'uppy',
   autoProceed: false,
+  allowMultipleUploads: true,
   debug: false,
   restrictions: {
     maxFileSize: null,
@@ -69,6 +70,14 @@ const photoUploader = Uppy({ id: 'post' })
 
 By default Uppy will wait for an upload button to be pressed in the UI, or an `.upload()` method to be called, before starting an upload. Setting this to `autoProceed: true` will start uploading automatically after the first file is selected.
 
+### `allowMultipleUploads: true`
+
+Whether to allow multiple upload batches. This means multiple calls to `.upload()`, or a user pressing an upload button multiple times, perhaps after adding more files. An upload batch is made up of the files that were added since the previous `.upload()` call.
+
+With this option set to `true`, users can upload some files, and then add _more_ files and upload those as well. A model use case for this is uploading images to a gallery or adding attachments to an email.
+
+With this option set to `false`, users can upload some files, and you can listen for the ['complete'](/docs/uppy/#complete) event to continue to the next step in your app's upload flow. A model use case for this is uploading a new profile picture. If you are integrating with an existing HTML form, this option gives the closest behaviour to a bare `<input type="file">`.
+
 ### `restrictions: {}`
 
 Optionally, provide rules and conditions to limit the type and/or number of files that can be selected.