Add canceling uploads (`core:upload-cancel`) in addition to pausing

src/core/Core.js

@@ -47,8 +47,8 @@ class Uppy {
       totalProgress: 0
     }
 
+    // for debugging and testing
     if (this.opts.debug) {
-      // for debugging and testing
       global.UppyState = this.state
       global.uppyLog = ''
       global.UppyAddFile = this.addFile.bind(this)
@@ -153,6 +153,7 @@ class Uppy {
     const updatedFiles = Object.assign({}, this.getState().files)
     delete updatedFiles[fileID]
     this.setState({files: updatedFiles})
+    this.log(`Removed file: ${fileID}`)
   }
 
   addThumbnail (fileID) {

src/plugins/Dashboard/Dashboard.js

@@ -107,6 +107,7 @@ export default function Dashboard (props) {
             resumeAll: props.resumeAll,
             pauseUpload: props.pauseUpload,
             startUpload: props.startUpload,
+            cancelUpload: props.cancelUpload,
             resumableUploads: props.resumableUploads
           })}
 

src/plugins/Dashboard/FileItem.js

@@ -47,10 +47,19 @@ export default function fileItem (props) {
           <button class="UppyDashboardItem-progressBtn"
                   title="${isUploaded
                           ? 'upload complete'
-                          : file.isPaused ? 'resume upload' : 'pause upload'}"
+                          : props.resumableUploads
+                            ? file.isPaused
+                              ? 'resume upload'
+                              : 'pause upload'
+                            : 'cancel upload'
+                        }"
                   onclick=${(ev) => {
                     if (isUploaded) return
-                    props.pauseUpload(file.id)
+                    if (props.resumableUploads) {
+                      props.pauseUpload(file.id)
+                    } else {
+                      props.cancelUpload(file.id)
+                    }
                   }}>
             ${FileItemProgress({
               progress: file.progress.percentage,

src/plugins/Dashboard/FileItemProgress.js

@@ -16,5 +16,6 @@ export default function (props) {
         <rect x="5" y="0" width="2" height="10" rx="0" />
       </g>
       <polygon transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" class="check"/>
+      <polygon class="cancel" transform="translate(2, 2)" points="19.8856516 11.0625 16 14.9481516 12.1019737 11.0625 11.0625 12.1143484 14.9481516 16 11.0625 19.8980263 12.1019737 20.9375 16 17.0518484 19.8856516 20.9375 20.9375 19.8980263 17.0518484 16 20.9375 12"></polygon>
   </svg>`
 }

src/plugins/Dashboard/FileList.js

@@ -32,6 +32,7 @@ export default (props) => {
           i18n: props.i18n,
           removeFile: props.removeFile,
           pauseUpload: props.pauseUpload,
+          cancelUpload: props.cancelUpload,
           resumableUploads: props.resumableUploads
         })
       })}

src/plugins/Dashboard/icons.js

@@ -45,7 +45,7 @@ export function localIcon () {
 
 export function closeIcon () {
   return html`<svg class="UppyIcon" width="14px" height="14px" viewBox="0 0 19 19">
-    <polygon points="17.3182539 17.2324466 9.93955339 9.85374611 9.586 9.50019272 9.23244661 9.85374611 1.85374611 17.2324466 2.56085289 17.2324466 1.93955339 16.6111471 1.93955865 17.3182486 9.31803946 9.93954813 9.67158232 9.58599474 9.31803419 9.23244661 1.93955339 1.85396581 1.93961588 2.56101008 2.56091538 1.93949089 1.85375137 1.93955865 9.23245187 9.31803946 9.586 9.67157706 9.93954813 9.31803946 17.3182486 1.93955865 16.6111471 1.93955339 17.2324466 2.56085289 17.2324466 1.85374611 9.85374611 9.23244661 9.50019272 9.586 9.85374611 9.93955339 17.2324466 17.3182539 17.9395534 16.6111471 10.5608529 9.23244661 10.5608529 9.93955339 17.9395534 2.56085289 18.2931068 2.2072995 17.9395534 1.85374611 17.3182539 1.23244661 16.9647058 0.878898482 16.6111524 1.23244135 9.23245187 8.61092215 9.93954813 8.61092215 2.56084763 1.23244135 2.20723173 0.87883598 1.85368362 1.23250911 1.23238412 1.85402831 0.878955712 2.20758169 1.23244661 2.56107259 8.61092741 9.93955339 8.61092215 9.23245187 1.23244135 16.6111524 0.878898482 16.9647058 1.23244661 17.3182539 1.85374611 17.9395534 2.2072995 18.2931068 2.56085289 17.9395534 9.93955339 10.5608529 9.23244661 10.5608529 16.6111471 17.9395534"></polygon>
+    <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>`
 }
 

src/plugins/Dashboard/index.js

@@ -271,6 +271,11 @@ export default class DashboardUI extends Plugin {
       this.core.emitter.emit('core:upload-pause', fileID)
     }
 
+    const cancelUpload = (fileID) => {
+      this.core.emitter.emit('core:upload-cancel', fileID)
+      this.core.emitter.emit('core:file-remove', fileID)
+    }
+
     const showFileCard = (fileID) => {
       this.core.emitter.emit('dashboard:file-card', fileID)
     }
@@ -325,6 +330,7 @@ export default class DashboardUI extends Plugin {
       resumableUploads: this.core.getState().capabilities.resumableUploads || false,
       startUpload: startUpload,
       pauseUpload: pauseUpload,
+      cancelUpload: cancelUpload,
       fileCardFor: state.modal.fileCardFor,
       showFileCard: showFileCard,
       fileCardDone: fileCardDone

src/plugins/Multipart.js

@@ -82,6 +82,13 @@ export default class Multipart extends Plugin {
 
       xhr.open('POST', this.opts.endpoint, true)
       xhr.send(formPost)
+
+      this.core.emitter.on('core:upload-cancel', (fileID) => {
+        if (fileID === file.id) {
+          xhr.abort()
+        }
+      })
+
       this.core.emitter.emit('core:upload-started', file.id)
     })
   }