feat(upload): add abort method

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-upload` adds `abort` method, closes [#3881](https://github.com/tusen-ai/naive-ui/issues/3881).
+
 ## 2.41.0
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## NEXT_VERSION
+
+### Features
+
+- `n-upload` 新增 `abort` 方法，关闭 [#3881](https://github.com/tusen-ai/naive-ui/issues/3881)
+
 ## 2.41.0
 
 `2025-01-05`

src/upload/demos/enUS/index.demo-entry.md

@@ -118,6 +118,7 @@ interface UploadCustomRequestOptions {
 | clear | `() => void` | Clear current upload list. | 2.24.2 |
 | openOpenFileDialog | `() => void` | Open the file dialog window. |  |
 | submit | `(fileId?: string)` | Submit all files with pending status. |  |
+| abort | `(fileId?: string)` | abort file with pending status, abort all if fileId is not specifield | NEXT_VERSION |
 
 ### Upload Slots
 

src/upload/demos/enUS/submit-manually.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-# Uncontrolled manually submit
+# Uncontrolled manually submit & abort
 
 You can use a `ref` to get a handle on files uploaded, and the `submit` method to submit them when you're ready.
 </markdown>
@@ -21,20 +21,24 @@ export default defineComponent({
       },
       handleClick() {
         uploadRef.value?.submit()
+      },
+      handleAbort() {
+        uploadRef.value?.abort()
       }
     }
   }
 })
 </script>
 
 <template>
-  <n-button
-    :disabled="!fileListLength"
-    style="margin-bottom: 12px"
-    @click="handleClick"
-  >
-    Upload File
-  </n-button>
+  <n-space style="margin-bottom: 12px">
+    <n-button :disabled="!fileListLength" @click="handleClick">
+      Upload File
+    </n-button>
+    <n-button @click="handleAbort">
+      Abort Uploading
+    </n-button>
+  </n-space>
   <n-upload
     ref="upload"
     action="__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f"

src/upload/demos/zhCN/index.demo-entry.md

@@ -119,6 +119,7 @@ interface UploadCustomRequestOptions {
 | clear | `() => void` | 清空上传列表 | 2.24.2 |
 | openOpenFileDialog | `() => void` | 打开文件选择对话框 |  |
 | submit | `(fileId?: string)` | 提交当前所有处于 pending 状态的文件 |  |
+| abort | `(fileId?: string)` | 终止当前处于 uploading 状态的文件，未指定 fileId 则取消所有 | NEXT_VERSION |
 
 ### Upload Slots
 

src/upload/demos/zhCN/submit-manually.demo.vue

@@ -1,5 +1,5 @@
 <markdown>
-# 非受控手动提交
+# 非受控手动提交 & 终止上传
 
 你可以使用 submit 方法来进行非受控状态下的手动提交。当然你也可以在受控模式下完全控制提交行为。
 </markdown>
@@ -21,20 +21,24 @@ export default defineComponent({
       },
       handleClick() {
         uploadRef.value?.submit()
+      },
+      handleAbort() {
+        uploadRef.value?.abort()
       }
     }
   }
 })
 </script>
 
 <template>
-  <n-button
-    :disabled="!fileListLength"
-    style="margin-bottom: 12px"
-    @click="handleClick"
-  >
-    上传文件
-  </n-button>
+  <n-space style="margin-bottom: 12px">
+    <n-button :disabled="!fileListLength" @click="handleClick">
+      上传文件
+    </n-button>
+    <n-button @click="handleAbort">
+      终止上传
+    </n-button>
+  </n-space>
   <n-upload
     ref="upload"
     action="__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f"

src/upload/src/Upload.tsx

@@ -499,6 +499,46 @@ export default defineComponent({
         warn('upload', 'File has no corresponding id in current file list.')
       }
     }
+    function doRemove(file: UploadSettledFileInfo, index: number): void {
+      void Promise.resolve(
+        props.onRemove
+          ? props.onRemove({
+              file: Object.assign({}, file),
+              fileList: mergedFileListRef.value,
+              index
+            })
+          : true
+      ).then((result) => {
+        if (result === false)
+          return
+        const fileAfterChange = Object.assign({}, file, {
+          status: 'removed'
+        })
+        xhrMap.delete(file.id)
+        doChange(fileAfterChange, undefined, {
+          remove: true
+        })
+      })
+    }
+    function doAbort(fileId?: string): void {
+      const fileIdsToBeRemoved: string[] = []
+      if (fileId === undefined) {
+        xhrMap.forEach((xhr, key) => {
+          xhr.abort()
+          fileIdsToBeRemoved.push(key)
+        })
+      }
+      else {
+        xhrMap.get(fileId)?.abort()
+        fileIdsToBeRemoved.push(fileId)
+      }
+      const fileList = mergedFileListRef.value.filter(file =>
+        fileIdsToBeRemoved.includes(file.id)
+      )
+      fileList.forEach((file, index) => {
+        doRemove(file, index)
+      })
+    }
     function handleFileAddition(
       fileAndEntries: FileAndEntry[] | null,
       e?: Event
@@ -708,6 +748,8 @@ export default defineComponent({
       xhrMap,
       submit,
       doChange,
+      doRemove,
+      doAbort,
       showPreviewButtonRef: toRef(props, 'showPreviewButton'),
       onPreviewRef: toRef(props, 'onPreview'),
       getFileThumbnailUrlResolver,
@@ -738,7 +780,8 @@ export default defineComponent({
         uncontrolledFileListRef.value = []
       },
       submit,
-      openOpenFileDialog
+      openOpenFileDialog,
+      abort: doAbort
     }
 
     return {

src/upload/src/UploadFile.tsx

@@ -135,10 +135,10 @@ export default defineComponent({
       e.preventDefault()
       const { file } = props
       if (['finished', 'pending', 'error'].includes(file.status)) {
-        handleRemove(file)
+        NUpload.doRemove(file, props.index)
       }
       else if (['uploading'].includes(file.status)) {
-        handleAbort(file)
+        NUpload.doAbort(file.id)
       }
       else {
         warn('upload', 'The button clicked type is unknown.')
@@ -148,33 +148,6 @@ export default defineComponent({
       e.preventDefault()
       handleDownload(props.file)
     }
-    function handleRemove(file: UploadSettledFileInfo): void {
-      const {
-        xhrMap,
-        doChange,
-        onRemoveRef: { value: onRemove },
-        mergedFileListRef: { value: mergedFileList }
-      } = NUpload
-      void Promise.resolve(
-        onRemove
-          ? onRemove({
-              file: Object.assign({}, file),
-              fileList: mergedFileList,
-              index: props.index
-            })
-          : true
-      ).then((result) => {
-        if (result === false)
-          return
-        const fileAfterChange = Object.assign({}, file, {
-          status: 'removed'
-        })
-        xhrMap.delete(file.id)
-        doChange(fileAfterChange, undefined, {
-          remove: true
-        })
-      })
-    }
     function handleDownload(file: UploadSettledFileInfo): void {
       const {
         onDownloadRef: { value: onDownload }
@@ -187,12 +160,6 @@ export default defineComponent({
         }
       })
     }
-    function handleAbort(file: UploadSettledFileInfo): void {
-      const { xhrMap } = NUpload
-      const xhr = xhrMap.get(file.id)
-      xhr?.abort()
-      handleRemove(Object.assign({}, file))
-    }
     function handlePreviewClick(e: MouseEvent): void {
       const {
         onPreviewRef: { value: onPreview }

src/upload/src/interface.ts

@@ -70,6 +70,8 @@ export interface UploadInjection {
   triggerClassRef: Ref<string | undefined>
   triggerStyleRef: Ref<CSSProperties | string | undefined>
   doChange: DoChange
+  doRemove: (file: UploadSettledFileInfo, index: number) => void
+  doAbort: (fileId?: string) => void
   onRender: undefined | (() => void)
   submit: (fileId?: string) => void
   onRetryRef: Ref<undefined | OnRetry>

src/upload/src/public-types.ts

@@ -6,6 +6,7 @@ export interface UploadInst {
   openOpenFileDialog: () => void
   submit: (fileId?: string) => void
   clear: () => void
+  abort: (fileId?: string) => void
 }
 
 export interface UploadFileInfo {