upload: add before-remove hook function

examples/docs/en-US/upload.md

@@ -116,6 +116,15 @@
       },
       handleExceed(files, fileList) {
         this.$message.warning(`You can upload up to 3 files. You selected ${files.length} files this time, and ${files.length + fileList.length} files totally`);
+      },
+      handleBeforeRemove(file, fileList) {
+        return new Promise((resolve, reject) => {
+          if (confirm('It looks good, are you sure to remove?')) {
+            resolve()
+          } else {
+            reject()
+          }
+        });
       }
     }
   }
@@ -126,13 +135,14 @@ Upload files by clicking or drag-and-drop
 
 ### Click to upload files
 
-:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded.
+:::demo Customize upload button type and text using `slot`. Set `limit` and `on-exceed` to limit the maximum number of uploads allowed and specify method when the limit is exceeded. Set `before-remove` is able to abort the remove operation.
 ```html
 <el-upload
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  :before-remove="handleBeforeRemove"
   multiple
   :limit="3"
   :on-exceed="handleExceed"
@@ -156,6 +166,15 @@ Upload files by clicking or drag-and-drop
       },
       handleExceed(files, fileList) {
         this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
+      },
+      handleBeforeRemove(file, fileList) {
+        return new Promise((resolve, reject) => {
+          if (confirm('It looks good, are you sure to remove?')) {
+            resolve()
+          } else {
+            reject()
+          }
+        });
       }
     }
   }
@@ -410,6 +429,7 @@ on-error | hook function when some errors occurs | function(err, file, fileList)
 on-progress | hook function when some progress occurs | function(event, file, fileList) | — | — |
 on-change | hook function when select file or upload file success or upload file fail | function(file, fileList) | — | — |
 before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted | function(file) | — | —
+before-remove | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, remove will be aborted. | function(file, fileList) | — | — |
 thumbnail-mode | whether thumbnail is displayed | boolean | — | false
 file-list | default uploaded files, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | []
 list-type | type of fileList | string | text/picture/picture-card | text |

examples/docs/zh-CN/upload.md

@@ -115,6 +115,15 @@
       },
       handleExceed(files, fileList) {
         this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      handleBeforeRemove(file, fileList) {
+        return new Promise((resolve, reject) => {
+          if (confirm('It looks good, are you sure to remove?')) {
+            resolve()
+          } else {
+            reject()
+          }
+        });
       }
     }
   }
@@ -126,13 +135,14 @@
 
 ### 点击上传
 
-:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。
+:::demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置 `limit` 和 `on-exceed` 来限制上传文件的个数和定义超出限制时的行为。可通过设置 `before-remove` 来阻止删除操作。
 ```html
 <el-upload
   class="upload-demo"
   action="https://jsonplaceholder.typicode.com/posts/"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
+  :before-remove="handleBeforeRemove"
   multiple
   :limit="3"
   :on-exceed="handleExceed"
@@ -156,6 +166,15 @@
       },
       handleExceed(files, fileList) {
         this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      handleBeforeRemove(file, fileList) {
+        return new Promise((resolve, reject) => {
+          if (confirm('It looks good, are you sure to remove?')) {
+            resolve()
+          } else {
+            reject()
+          }
+        });
       }
     }
   }
@@ -419,6 +438,7 @@
 | on-progress | 文件上传时的钩子 | function(event, file, fileList) | — | — |
 | on-change | 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 | function(file, fileList) | — | — |
 | before-upload | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 | function(file) | — | — |
+| before-remove | 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。| function(file, fileList) | — | — |
 | list-type | 文件列表的类型 | string | text/picture/picture-card | text |
 | auto-upload | 是否在选取文件后立即进行上传 | boolean | — | true |
 | file-list | 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] | array | — | [] |

packages/upload/src/index.vue

@@ -53,6 +53,7 @@ export default {
       default: 'select'
     },
     beforeUpload: Function,
+    beforeRemove: Function,
     onRemove: {
       type: Function,
       default: noop
@@ -175,10 +176,30 @@ export default {
       if (raw) {
         file = this.getFile(raw);
       }
+      let doRemove = () => {
         this.abort(file);
         let fileList = this.uploadFiles;
         fileList.splice(fileList.indexOf(file), 1);
         this.onRemove(file, fileList);
+      };
+
+      if (!this.beforeRemove) {
+        doRemove();
+        return;
+      }
+
+      const before = this.beforeRemove(file, this.uploadFiles);
+      if (before && before.then) {
+        before.then(() => {
+          doRemove();
+        }, () => {
+          // do nothing
+        });
+      } else if (before !== false) {
+        doRemove();
+      } else {
+        // do nothing
+      }
     },
     getFile(rawFile) {
       let fileList = this.uploadFiles;