Add cancel all (`core:cancel-all`)

src/core/Core.js

@@ -244,6 +244,13 @@ class Uppy {
       this.removeFile(fileID)
     })
 
+    this.on('core:cancel-all', () => {
+      const files = this.getState().files
+      Object.keys(files).forEach((file) => {
+        this.removeFile(files[file].id)
+      })
+    })
+
     this.on('core:upload-started', (fileID, upload) => {
       const updatedFiles = Object.assign({}, this.getState().files)
       const updatedFile = Object.assign({}, updatedFiles[fileID],

src/plugins/Dashboard/Dashboard.js

@@ -147,6 +147,7 @@ export default function Dashboard (props) {
             isUploadStarted: props.isUploadStarted,
             pauseAll: props.pauseAll,
             resumeAll: props.resumeAll,
+            cancelAll: props.cancelAll,
             complete: props.completeFiles.length,
             inProgress: props.inProgress,
             totalSpeed: props.totalSpeed,

src/plugins/Dashboard/StatusBar.js

@@ -51,9 +51,13 @@ const pauseResumeButtons = (props) => {
       ? html`<svg class="UppyIcon" width="15" height="17" viewBox="0 0 11 13">
         <path d="M1.26 12.534a.67.67 0 0 1-.674.012.67.67 0 0 1-.336-.583v-11C.25.724.38.5.586.382a.658.658 0 0 1 .673.012l9.165 5.5a.66.66 0 0 1 .325.57.66.66 0 0 1-.325.573l-9.166 5.5z" />
       </svg>`
-      : html`<svg class="UppyIcon" width="16" height="17" viewBox="0 0 12 13">
-        <path d="M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z"/>
-      </svg>`
+      : props.isResumable
+        ? html`<svg class="UppyIcon" width="16" height="17" viewBox="0 0 12 13">
+          <path d="M4.888.81v11.38c0 .446-.324.81-.722.81H2.722C2.324 13 2 12.636 2 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81zM9.888.81v11.38c0 .446-.324.81-.722.81H7.722C7.324 13 7 12.636 7 12.19V.81c0-.446.324-.81.722-.81h1.444c.398 0 .722.364.722.81z"/>
+        </svg>`
+        : html`<svg class="UppyIcon" width="16px" height="16px" viewBox="0 0 19 19">
+          <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z"/>
+        </svg>`
     }
   </button>`
 }
@@ -61,6 +65,10 @@ const pauseResumeButtons = (props) => {
 const togglePauseResume = (props) => {
   if (props.isAllComplete) return
 
+  if (!props.isResumable) {
+    return props.cancelAll()
+  }
+
   if (props.isAllPaused) {
     return props.resumeAll()
   }

src/plugins/Dashboard/index.js

@@ -39,6 +39,7 @@ export default class DashboardUI extends Plugin {
     this.handleDrop = this.handleDrop.bind(this)
     this.pauseAll = this.pauseAll.bind(this)
     this.resumeAll = this.resumeAll.bind(this)
+    this.cancelAll = this.cancelAll.bind(this)
     this.render = this.render.bind(this)
     this.install = this.install.bind(this)
   }
@@ -191,6 +192,10 @@ export default class DashboardUI extends Plugin {
     })
   }
 
+  cancelAll () {
+    this.core.bus.emit('core:cancel-all')
+  }
+
   pauseAll () {
     this.core.bus.emit('core:pause-all')
   }
@@ -323,6 +328,7 @@ export default class DashboardUI extends Plugin {
       i18n: this.core.i18n,
       pauseAll: this.pauseAll,
       resumeAll: this.resumeAll,
+      cancelAll: this.cancelAll,
       addFile: addFile,
       removeFile: removeFile,
       info: info,

src/plugins/Multipart.js

@@ -89,6 +89,12 @@ export default class Multipart extends Plugin {
         }
       })
 
+      this.core.emitter.on('core:cancel-all', () => {
+        // const files = this.core.getState().files
+        // if (!files[file.id]) return
+        xhr.abort()
+      })
+
       this.core.emitter.emit('core:upload-started', file.id)
     })
   }