Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(uploader): add onOverLimit props & fix incorrect updating files when type = multiple #2566

Closed
wants to merge 6 commits into from
Closed

feat(uploader): add onOverLimit props & fix incorrect updating files when type = multiple #2566

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7122af6
fix(uploader): uploader
Alex-huxiyang Sep 4, 2024
263d5f2
fix: uploader
Alex-huxiyang Sep 4, 2024
5525954
Merge branch 'next' into hxy/uploader/0903
Alex-huxiyang Sep 6, 2024
92634e8
fix: correct doc & resilve conflicts
Alex-huxiyang Sep 6, 2024
1068b52
Merge branch 'next' into hxy/uploader/0903
Alex-huxiyang Oct 11, 2024
d730344
Merge branch 'next' into hxy/uploader/0903
Alex-huxiyang Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion src/packages/uploader/demos/h5/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,15 @@ import { Uploader } from '@nutui/nutui-react'

const Demo7 = () => {
const uploadUrl = 'https://my-json-server.typicode.com/linrufeng/demo/posts'
return <Uploader url={uploadUrl} multiple maxCount="5" />
return (
<Uploader
url={uploadUrl}
multiple
maxCount="5"
onOverLimit={(files: File[]) => {
console.log('onOverLimit', files)
}}
/>
)
}
export default Demo7
11 changes: 10 additions & 1 deletion src/packages/uploader/demos/taro/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <Uploader url={uploadUrl} multiple maxCount="5" />
return (
<Uploader
url={uploadUrl}
multiple
maxCount="5"
onOverLimit={(files: File[]) => {
console.log('onOverLimit', files)
}}
/>
)
}
export default Demo8
1 change: 1 addition & 0 deletions src/packages/uploader/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
| onStart | File upload started | `(option: UploadOptions) => void` | `-` |
| onProgress | Progress of file upload | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onOversize | Triggered when the file size exceeds the limit | `(file: File[]) => void` | `-` |
| onOverLimit | Triggered when the number of files exceeds the maxCount | `(file: File[]) => void` | `-` |
| onSuccess | uploaded successfully | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onFailure | upload failed | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onChange | Status when uploaded files change | `(files: FileItem[]) => void` | `-` |
Expand Down
1 change: 1 addition & 0 deletions src/packages/uploader/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
| onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` |
| onProgress | 文件上传的进度 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onOversize | 文件大小超过限制时触发 | `(file: File[]) => void` | `-` |
| onOverLimit | 文件数量超过限制时触发 | `(file: File[]) => void` | `-` |
| onSuccess | 上传成功 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onFailure | 上传失败 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onChange | 上传文件改变时的状态 | `(files: FileItem[]) => void` | `-` |
Expand Down
1 change: 1 addition & 0 deletions src/packages/uploader/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
| onStart | 文件上传开始 | `(option: UploadOptions) => void` | `-` |
| onProgress | 文件上传的进度 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;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` | `-` |
Expand Down
1 change: 1 addition & 0 deletions src/packages/uploader/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ app.post('/upload', upload.single('file'), (req, res) => {
| onStart | 文件上傳開始 | `(option: UploadOptions) => void` | `-` |
| onProgress | 文件上傳的進度 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onOversize | 文件大小超過限制時觸發 | `(file: File[]) => void` | `-` |
| onOverLimit | 文件數量超過限製時觸發 | `(file: File[]) => void` | `-` |
| onSuccess | 上傳成功 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onFailure | 上傳失敗 | `(param: {e: ProgressEvent<XMLHttpRequestEventTarget>;option: UploadOptions;percentage: string \| number}) => void` | `-` |
| onChange | 上傳文件改變時的狀態 | `(files: FileItem[]) => void` | `-` |
Expand Down
11 changes: 10 additions & 1 deletion src/packages/uploader/uploader.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,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
beforeUpload?: (
files: Taro.chooseImage.ImageFile[] | Taro.chooseMedia.ChooseMedia[] | any
Expand Down Expand Up @@ -199,6 +202,7 @@ const InternalUploader: ForwardRefRenderFunction<
onUpdate,
onFailure,
onOversize,
onOverLimit,
beforeUpload,
beforeXhrUpload,
beforeDelete,
Expand Down Expand Up @@ -387,6 +391,7 @@ const InternalUploader: ForwardRefRenderFunction<
}

const readFile = <T extends TFileType>(files: T[]) => {
const _files: FileItem[] = []
files.forEach((file: T, index: number) => {
let fileType = file.type
const filepath = (file.tempFilePath || file.path) as string
Expand Down Expand Up @@ -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)
})
}

Expand All @@ -448,6 +456,7 @@ const InternalUploader: ForwardRefRenderFunction<
const currentFileLength = filterFile.length + fileList.length
if (currentFileLength > maximum) {
filterFile.splice(filterFile.length - (currentFileLength - maximum))
onOverLimit?.(filterFile)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

onOverLimit 回调传递的文件列表可能不正确

在 filterFiles 函数中，当文件总数超过最大限制时，使用 splice 方法移除了多余的文件。但随后调用 onOverLimit?.(filterFile) 时，传递的是已经被修改后的 filterFile，这可能导致回调函数无法获取到超出限制的文件列表。

建议在移除超出限制的文件之前，先保存这些文件，然后在回调中传递给 onOverLimit。修改如下：

+ const overLimitFiles = filterFile.slice(-(currentFileLength - maximum))
  filterFile.splice(filterFile.length - (currentFileLength - maximum))
- onOverLimit?.(filterFile)
+ onOverLimit?.(overLimitFiles)
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onOverLimit?.(filterFile)
const overLimitFiles = filterFile.slice(-(currentFileLength - maximum))
filterFile.splice(filterFile.length - (currentFileLength - maximum))
onOverLimit?.(overLimitFiles)

}
return filterFile
}
Expand Down
12 changes: 8 additions & 4 deletions src/packages/uploader/uploader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
}) => void
onUpdate?: (files: FileItem[]) => void
onOversize?: (files: File[]) => void
onOverLimit?: (files: File[]) => void
onChange?: (files: FileItem[]) => void
beforeUpload?: (files: File[]) => Promise<File[] | boolean>
beforeXhrUpload?: (xhr: XMLHttpRequest, options: any) => void
Expand Down Expand Up @@ -145,6 +146,7 @@
onUpdate,
onFailure,
onOversize,
onOverLimit,
beforeUpload,
beforeXhrUpload,
beforeDelete,
Expand Down Expand Up @@ -288,6 +290,7 @@
}

const readFile = (files: File[]) => {
const _files: FileItem[] = []

Check warning on line 293 in src/packages/uploader/uploader.tsx

View check run for this annotation

Codecov / codecov/patch

src/packages/uploader/uploader.tsx#L293 

Added line #L293 was not covered by tests
files.forEach((file: File, index: number) => {
const formData = new FormData()
formData.append(name, file)
Expand All @@ -301,16 +304,17 @@
? locale.uploader.readyUpload
: locale.uploader.waitingUpload
executeUpload(fileItem, index)

if (preview && file.type?.includes('image')) {
const reader = new FileReader()
reader.onload = (event: ProgressEvent<FileReader>) => {
fileItem.url = (event.target as FileReader).result as string
setFileList([...fileList, fileItem])
_files.push(fileItem)
setFileList(_files)

Check warning on line 312 in src/packages/uploader/uploader.tsx

View check run for this annotation

Codecov / codecov/patch

src/packages/uploader/uploader.tsx#L311-L312 

Added lines #L311 - L312 were not covered by tests
}
reader.readAsDataURL(file)
} else {
setFileList([...fileList, fileItem])
_files.push(fileItem)
setFileList(_files)

Check warning on line 317 in src/packages/uploader/uploader.tsx

View check run for this annotation

Codecov / codecov/patch

src/packages/uploader/uploader.tsx#L316-L317 

Added lines #L316 - L317 were not covered by tests
}
})
}
Expand All @@ -326,9 +330,9 @@
return true
})
oversizes.length && onOversize?.(files)

if (filterFile.length > maximum) {
filterFile.splice(maximum, filterFile.length - maximum)
onOverLimit?.(filterFile)

Check warning on line 335 in src/packages/uploader/uploader.tsx

View check run for this annotation

Codecov / codecov/patch

src/packages/uploader/uploader.tsx#L335 

Added line #L335 was not covered by tests
Alex-huxiyang marked this conversation as resolved.
Show resolved Hide resolved
}
if (fileList.length !== 0) {
const index = maximum - fileList.length
Expand Down
Loading