Merge pull request #2323 from transloadit/dashboard-file-removed-ui

Add `reason` to `file-removed` event to distinguish when a file was manually removed by user

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

@@ -711,7 +711,7 @@ class Uppy {
     }
   }
 
-  removeFiles (fileIDs) {
+  removeFiles (fileIDs, reason) {
     const { files, currentUploads } = this.getState()
     const updatedFiles = { ...files }
     const updatedUploads = { ...currentUploads }
@@ -764,7 +764,7 @@ class Uppy {
 
     const removedFileIDs = Object.keys(removedFiles)
     removedFileIDs.forEach((fileID) => {
-      this.emit('file-removed', removedFiles[fileID])
+      this.emit('file-removed', removedFiles[fileID], reason)
     })
 
     if (removedFileIDs.length > 5) {
@@ -774,8 +774,8 @@ class Uppy {
     }
   }
 
-  removeFile (fileID) {
-    this.removeFiles([fileID])
+  removeFile (fileID, reason = null) {
+    this.removeFiles([fileID], reason)
   }
 
   pauseResume (fileID) {
@@ -866,7 +866,7 @@ class Uppy {
 
     const fileIDs = Object.keys(files)
     if (fileIDs.length) {
-      this.removeFiles(fileIDs)
+      this.removeFiles(fileIDs, 'cancel-all')
     }
 
     this.setState({

packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js

@@ -112,7 +112,7 @@ module.exports = function Buttons (props) {
           i18n={i18n}
           info={props.info}
           log={props.log}
-          onClick={() => removeFile(file.id)}
+          onClick={() => removeFile(file.id, 'removed-by-user')}
         />
       ) : null}
     </div>

website/src/docs/dashboard.md

@@ -193,6 +193,16 @@ See also `disableStatusBar` option, which can hide the progress and upload butto
 
 Sometimes you might want to let users remove an uploaded file. Enabling this option only shows the remove `X` button in the Dashboard UI, but to actually send a request you should listen to [`file-removed`](https://uppy.io/docs/uppy/#file-removed) event and add your logic there.
 
+```js
+uppy.on('file-removed', (file, reason) => {
+  if (reason === 'removed-by-user') {
+    sendDeleteRequestForFile(file)
+  }
+})
+```
+
+For an implementation example, please see [#2301](https://github.com/transloadit/uppy/issues/2301#issue-628931176)).
+
 ### `note: null`
 
 Optionally, specify a string of text that explains something about the upload for the user. This is a place to explain any `restrictions` that are put in place. For example: `'Images and video only, 2–3 files, up to 1 MB'`.

website/src/docs/uppy.md

@@ -660,11 +660,25 @@ uppy.on('file-added', (file) => {
 Fired each time a file is removed.
 
 ```javascript
-uppy.on('file-removed', (file) => {
+uppy.on('file-removed', (file, reason) => {
   console.log('Removed file', file)
 })
 ```
 
+Reason is provided as a second argument, so that you can distinguish when a user manually removed a file in the UI vs API calling `uppy.reset()` or `uppy.cancel()`. See [#2301](https://github.com/transloadit/uppy/issues/2301#issue-628931176) for details.
+
+Current reasons are: `removed-by-user` and `cancel-all`.
+
+```js
+uppy.on('file-removed', (file, reason) => {
+  removeFileFromUploadingCounterUI(file)
+
+  if (reason === 'removed-by-user') {
+    sendDeleteRequestForFile(file)
+  }
+})
+```
+
 ### `upload`
 
 Fired when upload starts.