From 7122af66716146093bfc7a1a3a33628deed77d72 Mon Sep 17 00:00:00 2001 From: huxiyang <1872591453@qq.com> Date: Wed, 4 Sep 2024 10:54:05 +0800 Subject: [PATCH 1/3] fix(uploader): uploader --- src/packages/uploader/demos/h5/demo7.tsx | 11 ++++++++++- src/packages/uploader/demos/taro/demo8.tsx | 11 ++++++++++- src/packages/uploader/doc.en-US.md | 1 + src/packages/uploader/doc.md | 1 + src/packages/uploader/doc.taro.md | 1 + src/packages/uploader/doc.zh-TW.md | 1 + src/packages/uploader/uploader.taro.tsx | 11 ++++++++++- src/packages/uploader/uploader.tsx | 12 ++++++++---- 8 files changed, 42 insertions(+), 7 deletions(-) diff --git a/src/packages/uploader/demos/h5/demo7.tsx b/src/packages/uploader/demos/h5/demo7.tsx index 72c432371f..dca2bda423 100644 --- a/src/packages/uploader/demos/h5/demo7.tsx +++ b/src/packages/uploader/demos/h5/demo7.tsx @@ -3,6 +3,15 @@ import { Uploader } from '@nutui/nutui-react' const Demo7 = () => { const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts' - return + return ( + { + console.log('onOverLimit', files) + }} + /> + ) } export default Demo7 diff --git a/src/packages/uploader/demos/taro/demo8.tsx b/src/packages/uploader/demos/taro/demo8.tsx index 80e0dfd90b..76c07686e9 100644 --- a/src/packages/uploader/demos/taro/demo8.tsx +++ b/src/packages/uploader/demos/taro/demo8.tsx @@ -3,6 +3,15 @@ import { Uploader } from '@nutui/nutui-react-taro' const Demo8 = () => { const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts' - return + return ( + { + console.log('onOverLimit', files) + }} + /> + ) } export default Demo8 diff --git a/src/packages/uploader/doc.en-US.md b/src/packages/uploader/doc.en-US.md index 051c42f5e6..e2adb2dacd 100644 --- a/src/packages/uploader/doc.en-US.md +++ b/src/packages/uploader/doc.en-US.md @@ -173,6 +173,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | File upload started | `(option: UploadOptions) => void` | `-` | | onProgress | Progress of file upload | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | Triggered when the file size exceeds the limit | `(file: File[]) => void` | `-` | +| onOverLimit | Triggered when the file size exceeds the maxCount | `(file: File[]) => void` | `-` | | onSuccess | uploaded successfully | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | upload failed | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | Status when uploaded files change | `(files: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/doc.md b/src/packages/uploader/doc.md index 10a323ec32..02e20505e8 100644 --- a/src/packages/uploader/doc.md +++ b/src/packages/uploader/doc.md @@ -174,6 +174,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` | | onProgress | 文件上传的进度 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | 文件大小超过限制时触发 | `(file: File[]) => void` | `-` | +| onOverLimit | 文件数量超过限制时触发 | `(file: File[]) => void` | `-` | | onSuccess | 上传成功 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | 上传失败 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | 上传文件改变时的状态 | `(files: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/doc.taro.md b/src/packages/uploader/doc.taro.md index 7eb610ce5e..342f700d9a 100644 --- a/src/packages/uploader/doc.taro.md +++ b/src/packages/uploader/doc.taro.md @@ -173,6 +173,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` | | onProgress | 文件上传的进度 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | 文件大小超过限制时触发 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;files: FileItem[]}) => void` | `-` | +| onOverLimit | 文件数量超过限制时触发 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;files: FileItem[]}) => void` | `-` | | onSuccess | 上传成功 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | 上传失败 | `(param: {responseText: XMLHttpRequest['responseText'];option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | 上传文件改变时的状态 | `(param: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/doc.zh-TW.md b/src/packages/uploader/doc.zh-TW.md index 90f42648ed..86f731fd8c 100644 --- a/src/packages/uploader/doc.zh-TW.md +++ b/src/packages/uploader/doc.zh-TW.md @@ -173,6 +173,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | 文件上傳開始 | `(option: UploadOptions) => void` | `-` | | onProgress | 文件上傳的進度 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | 文件大小超過限制時觸發 | `(file: File[]) => void` | `-` | +| onOverLimit | 文件數量超過限製時觸發 | `(file: File[]) => void` | `-` | | onSuccess | 上傳成功 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | 上傳失敗 | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | 上傳文件改變時的狀態 | `(files: FileItem[]) => void` | `-` | diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx index c6d3756795..8b66fe81d6 100644 --- a/src/packages/uploader/uploader.taro.tsx +++ b/src/packages/uploader/uploader.taro.tsx @@ -114,6 +114,9 @@ export interface UploaderProps extends BasicComponent { onOversize?: ( files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any ) => void + onOverLimit?: ( + files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any + ) => void onChange?: (files: FileItem[]) => void beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void beforeDelete?: (file: FileItem, files: FileItem[]) => boolean @@ -196,6 +199,7 @@ const InternalUploader: ForwardRefRenderFunction< onUpdate, onFailure, onOversize, + onOverLimit, beforeXhrUpload, beforeDelete, ...restProps @@ -387,6 +391,7 @@ const InternalUploader: ForwardRefRenderFunction< } const readFile = (files: T[]) => { + const _files: FileItem[] = [] files.forEach((file: T, index: number) => { let fileType = file.type const filepath = (file.tempFilePath || file.path) as string @@ -426,9 +431,12 @@ const InternalUploader: ForwardRefRenderFunction< } if (preview) { fileItem.url = fileType === 'video' ? file.thumbTempFilePath : filepath + _files.push(fileItem) + } else { + _files.push(fileItem) } executeUpload(fileItem, index) - setFileList([...fileList, fileItem]) + setFileList(_files) }) } @@ -448,6 +456,7 @@ const InternalUploader: ForwardRefRenderFunction< const currentFileLength = filterFile.length + fileList.length if (currentFileLength > maximum) { filterFile.splice(filterFile.length - (currentFileLength - maximum)) + onOverLimit?.(files) } return filterFile } diff --git a/src/packages/uploader/uploader.tsx b/src/packages/uploader/uploader.tsx index a5caa2184c..2b8a727790 100644 --- a/src/packages/uploader/uploader.tsx +++ b/src/packages/uploader/uploader.tsx @@ -64,6 +64,7 @@ export interface UploaderProps extends BasicComponent { }) => void onUpdate?: (files: FileItem[]) => void onOversize?: (files: File[]) => void + onOverLimit?: (files: File[]) => void onChange?: (files: FileItem[]) => void beforeUpload?: (files: File[]) => Promise beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void @@ -142,6 +143,7 @@ const InternalUploader: ForwardRefRenderFunction< onUpdate, onFailure, onOversize, + onOverLimit, beforeUpload, beforeXhrUpload, beforeDelete, @@ -285,6 +287,7 @@ const InternalUploader: ForwardRefRenderFunction< } const readFile = (files: File[]) => { + const _files: FileItem[] = [] files.forEach((file: File, index: number) => { const formData = new FormData() formData.append(name, file) @@ -298,16 +301,17 @@ const InternalUploader: ForwardRefRenderFunction< ? locale.uploader.readyUpload : locale.uploader.waitingUpload executeUpload(fileItem, index) - if (preview && file.type?.includes('image')) { const reader = new FileReader() reader.onload = (event: ProgressEvent) => { fileItem.url = (event.target as FileReader).result as string - setFileList([...fileList, fileItem]) + _files.push(fileItem) + setFileList(_files) } reader.readAsDataURL(file) } else { - setFileList([...fileList, fileItem]) + _files.push(fileItem) + setFileList(_files) } }) } @@ -323,9 +327,9 @@ const InternalUploader: ForwardRefRenderFunction< return true }) oversizes.length && onOversize?.(files) - if (filterFile.length > maximum) { filterFile.splice(maximum, filterFile.length - maximum) + onOverLimit?.(files) } if (fileList.length !== 0) { const index = maximum - fileList.length From 263d5f292cb6e1ede661f12bac855ad79611c967 Mon Sep 17 00:00:00 2001 From: huxiyang <1872591453@qq.com> Date: Wed, 4 Sep 2024 11:02:30 +0800 Subject: [PATCH 2/3] fix: uploader --- src/packages/uploader/demos/taro/demo8.tsx | 2 +- src/packages/uploader/uploader.taro.tsx | 2 +- src/packages/uploader/uploader.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/packages/uploader/demos/taro/demo8.tsx b/src/packages/uploader/demos/taro/demo8.tsx index 76c07686e9..5fcd5865f2 100644 --- a/src/packages/uploader/demos/taro/demo8.tsx +++ b/src/packages/uploader/demos/taro/demo8.tsx @@ -7,7 +7,7 @@ const Demo8 = () => { { console.log('onOverLimit', files) }} diff --git a/src/packages/uploader/uploader.taro.tsx b/src/packages/uploader/uploader.taro.tsx index 8b66fe81d6..27676145a8 100644 --- a/src/packages/uploader/uploader.taro.tsx +++ b/src/packages/uploader/uploader.taro.tsx @@ -456,7 +456,7 @@ const InternalUploader: ForwardRefRenderFunction< const currentFileLength = filterFile.length + fileList.length if (currentFileLength > maximum) { filterFile.splice(filterFile.length - (currentFileLength - maximum)) - onOverLimit?.(files) + onOverLimit?.(filterFile) } return filterFile } diff --git a/src/packages/uploader/uploader.tsx b/src/packages/uploader/uploader.tsx index 2b8a727790..80a88c14a5 100644 --- a/src/packages/uploader/uploader.tsx +++ b/src/packages/uploader/uploader.tsx @@ -329,7 +329,7 @@ const InternalUploader: ForwardRefRenderFunction< oversizes.length && onOversize?.(files) if (filterFile.length > maximum) { filterFile.splice(maximum, filterFile.length - maximum) - onOverLimit?.(files) + onOverLimit?.(filterFile) } if (fileList.length !== 0) { const index = maximum - fileList.length From 92634e807aacb2c973725053721a78621a030d64 Mon Sep 17 00:00:00 2001 From: huxiyang3 <1872591453@qq.com> Date: Fri, 6 Sep 2024 14:22:35 +0800 Subject: [PATCH 3/3] fix: correct doc & resilve conflicts --- src/packages/uploader/doc.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/packages/uploader/doc.en-US.md b/src/packages/uploader/doc.en-US.md index e2adb2dacd..79b50b71ac 100644 --- a/src/packages/uploader/doc.en-US.md +++ b/src/packages/uploader/doc.en-US.md @@ -173,7 +173,7 @@ app.post('/upload', upload.single('file'), (req, res) => { | onStart | File upload started | `(option: UploadOptions) => void` | `-` | | onProgress | Progress of file upload | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onOversize | Triggered when the file size exceeds the limit | `(file: File[]) => void` | `-` | -| onOverLimit | Triggered when the file size exceeds the maxCount | `(file: File[]) => void` | `-` | +| onOverLimit | Triggered when the number of files exceeds the maxCount | `(file: File[]) => void` | `-` | | onSuccess | uploaded successfully | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onFailure | upload failed | `(param: {e: ProgressEvent;option: UploadOptions;percentage: string \| number}) => void` | `-` | | onChange | Status when uploaded files change | `(files: FileItem[]) => void` | `-` |