feat(upload): add event in on-finish callback (#479)

Co-authored-by: Jiwen Bai <56228105@qq.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -7,6 +7,7 @@
 - `n-rate` add `allow-half` prop.
 - `n-carousel` add `show-arrow` prop.
 - `n-slider` add `format-tooltip` prop.
+- `n-upload` add `event` in `on-finish` callback params.
 - `n-rate` add `readonly` prop.
 
 ### Fixes

CHANGELOG.zh-CN.md

@@ -6,6 +6,8 @@
 
 - `n-rate` 新增 `allow-half` 属性
 - `n-carousel` 新增 `show-arrow` 属性
+- `n-slider` 新增 `format-tooltip` 属性.
+- `n-upload` 在 `on-finish` 回调参数中新增 `event`
 - `n-slider` 新增 `format-tooltip` 属性
 - `n-rate` 新增 `readonly` 属性
 

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

@@ -38,7 +38,7 @@ before-upload
 | with-credentials | `boolean` | `false` | If cookie attached. |
 | on-change | `(options: { file: UploadFile, fileList: Array<UploadFile>, event?: Event }) => void` | `() => {}` | The callback of status change of the component. Any file status change would fire the callback. |
 | on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | Callback function triggered on fileList changes. |
-| on-finish | `(options: { file: UploadFile }) => UploadFile \| void` | `({ file }) => file` | The callback of file upload finish. You can modify the UploadFile or retun a new UploadFile. |
+| on-finish | `(options: { file: UploadFile, event: Event }) => UploadFile \| void` | `({ file }) => file` | The callback of file upload finish. You can modify the UploadFile or retun a new UploadFile. |
 | on-remove | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => boolean \| Promise<boolean> \| any` | `() => true` | The callback of file removal. Return false, promise resolve false or promise reject will cancel this removal. |
 | on-before-upload | `(options: { file: UploadFile, fileList: Array<UploadFile> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload. |
 

src/upload/demos/enUS/on-finish.demo.md

@@ -12,11 +12,19 @@ You can change file's property when upload finishes.
 ```
 
 ```js
+import { useMessage } from 'naive-ui'
+
 export default {
-  methods: {
-    handleFinish ({ file }) {
+  setup() {
+    const message = useMessage()
+    const handleFinish = ({ file, event }) => {
+      message.success(event.target.response)
       file.url = 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f'
     }
+    return {
+      message,
+      handleFinish
+    }
   }
 }
 ```

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

@@ -37,7 +37,7 @@ before-upload
 | show-retry-button | `boolean` | `true` | 是否显示重新上传按钮（在 error 时展示） |
 | with-credentials | `boolean` | `false` | 是否携带 Cookie |
 | on-change | `(options: { file: UploadFile, fileList: Array<UploadFile>, event?: Event }) => void` | `() => {}` | 组件状态变化的回调，组件的任何文件状态变化都会触发回调 |
-| on-finish | `(options: { file: UploadFile }) => UploadFile \| void` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFile 或者返回一个新的 UploadFile |
+| on-finish | `(options: { file: UploadFile, event: Event }) => UploadFile \| void` | `({ file }) => file` | 文件上传结束的回调，可以修改传入的 UploadFile 或者返回一个新的 UploadFile |
 | on-update:file-list | `(fileList: UploadFile[]) => void` | `undefined` | 当 file-list 改变时触发的回调函数 |
 | on-before-upload | `(options: { file: UploadFile, fileList: UploadFile[] }) => (Promise<boolean \| void> \| boolean \| void)` | `undefined` | 文件上传之前的回调，返回 `false`、`Promise resolve false`、`Promise rejected` 时会取消本次上传 |
 

src/upload/demos/zhCN/on-finish.demo.md

@@ -12,11 +12,19 @@
 ```
 
 ```js
+import { useMessage } from 'naive-ui'
+
 export default {
-  methods: {
-    handleFinish ({ file }) {
+  setup() {
+    const message = useMessage()
+    const handleFinish = ({ file, event }) => {
+      message.success(event.target.response)
       file.url = 'http://www.mocky.io/v2/5e4bafc63100007100d8b70f'
     }
+    return {
+      message,
+      handleFinish
+    }
   }
 }
 ```

src/upload/src/Upload.tsx

@@ -58,7 +58,7 @@ function createXhrHandlers (
       })
       XhrMap.delete(file.id)
       fileAfterChange =
-        inst.onFinish?.({ file: fileAfterChange }) || fileAfterChange
+        inst.onFinish?.({ file: fileAfterChange, event: e }) || fileAfterChange
       doChange(fileAfterChange, e)
     },
     handleXHRAbort (e) {

src/upload/src/interface.ts

@@ -21,7 +21,13 @@ export type OnChange = (data: {
   fileList: FileInfo[]
   event: ProgressEvent | Event | undefined
 }) => void
-export type OnFinish = ({ file }: { file: FileInfo }) => FileInfo | undefined
+export type OnFinish = ({
+  file,
+  event
+}: {
+  file: FileInfo
+  event: Event
+}) => FileInfo | undefined
 export type OnRemove = (data: {
   file: FileInfo
   fileList: FileInfo[]