From bf333d7b77ddbc23009c0964b346e05f2cdad2c3 Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Mon, 26 Jun 2023 22:10:17 +0800 Subject: [PATCH 1/7] fix(Upload): fix style --- .../core/client/src/schema-component/antd/upload/style.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/client/src/schema-component/antd/upload/style.less b/packages/core/client/src/schema-component/antd/upload/style.less index 41468d990f36..a4b225c47131 100644 --- a/packages/core/client/src/schema-component/antd/upload/style.less +++ b/packages/core/client/src/schema-component/antd/upload/style.less @@ -40,7 +40,7 @@ background: rgba(0, 0, 0, 0.5); } .ant-upload-list-picture-card-container { - // margin-bottom: 28px; + margin-bottom: 28px; } } From 23e322a89d2628e654440299d4b20432c7c4415e Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Tue, 27 Jun 2023 08:05:38 +0800 Subject: [PATCH 2/7] fix(Upload): fix uploading --- .../schema-component/antd/upload/Upload.tsx | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx index 03b270f64ea8..774f9456d9c2 100644 --- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx +++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx @@ -3,7 +3,6 @@ import { usePrefixCls } from '@formily/antd/esm/__builtins__'; import { connect, mapProps, mapReadPretty } from '@formily/react'; import { Upload as AntdUpload, Button, Progress, Space, Modal } from 'antd'; import cls from 'classnames'; -import { css } from '@emotion/css'; import { saveAs } from 'file-saver'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -64,7 +63,7 @@ Upload.Attachment = connect((props: UploadProps) => { } }; return ( -
+
@@ -141,12 +140,29 @@ Upload.Attachment = connect((props: UploadProps) => { listType={'picture-card'} fileList={fileList} onChange={(info) => { + // ---------------------------------------------- + // 使用 info.fileList 会导致一直显示 Uploading 的问题 + // 注意：此方法依然不能保证一定不会出现 Uploading 的问题，但相比之前有很大改善，具体原因不明 + let list = fileList; + if (!list.find((file) => file.uid === info.file.uid)) { + list.push({ ...info.file }); + } + list = list.map((file) => { + if (file.uid === info.file.uid) { + return { ...info.file }; + } + return file; + }); + // ---------------------------------------------- + + console.log(info.file.uid, info.file.status); + setSync(false); if (multiple) { if (info.file.status === 'done') { - onChange(toValue(info.fileList)); + onChange(toValue(list)); } - setFileList(info.fileList.map(toItem)); + setFileList(list.map(toItem)); } else { if (info.file.status === 'done') { // TODO(BUG): object 的联动有问题，不响应，折中的办法先置空再赋值 From 50ea12eb9a1266d9b3cce224e7e928fa768d5a52 Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Tue, 27 Jun 2023 08:19:01 +0800 Subject: [PATCH 3/7] Revert "fix(Upload): fix uploading" This reverts commit 45984cd59fab38b8e6fb3f49930b29acc8699b4f. --- .../schema-component/antd/upload/Upload.tsx | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx index 774f9456d9c2..03b270f64ea8 100644 --- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx +++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx @@ -3,6 +3,7 @@ import { usePrefixCls } from '@formily/antd/esm/__builtins__'; import { connect, mapProps, mapReadPretty } from '@formily/react'; import { Upload as AntdUpload, Button, Progress, Space, Modal } from 'antd'; import cls from 'classnames'; +import { css } from '@emotion/css'; import { saveAs } from 'file-saver'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -63,7 +64,7 @@ Upload.Attachment = connect((props: UploadProps) => { } }; return ( -
+
@@ -140,29 +141,12 @@ Upload.Attachment = connect((props: UploadProps) => { listType={'picture-card'} fileList={fileList} onChange={(info) => { - // ---------------------------------------------- - // 使用 info.fileList 会导致一直显示 Uploading 的问题 - // 注意：此方法依然不能保证一定不会出现 Uploading 的问题，但相比之前有很大改善，具体原因不明 - let list = fileList; - if (!list.find((file) => file.uid === info.file.uid)) { - list.push({ ...info.file }); - } - list = list.map((file) => { - if (file.uid === info.file.uid) { - return { ...info.file }; - } - return file; - }); - // ---------------------------------------------- - - console.log(info.file.uid, info.file.status); - setSync(false); if (multiple) { if (info.file.status === 'done') { - onChange(toValue(list)); + onChange(toValue(info.fileList)); } - setFileList(list.map(toItem)); + setFileList(info.fileList.map(toItem)); } else { if (info.file.status === 'done') { // TODO(BUG): object 的联动有问题，不响应，折中的办法先置空再赋值 From cdff5a97361cbacde70da090c349f0104b4e18a0 Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Tue, 27 Jun 2023 08:29:52 +0800 Subject: [PATCH 4/7] refactor: add key --- .../core/client/src/schema-component/antd/upload/Upload.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx index 03b270f64ea8..9dce784ccedb 100644 --- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx +++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx @@ -3,7 +3,6 @@ import { usePrefixCls } from '@formily/antd/esm/__builtins__'; import { connect, mapProps, mapReadPretty } from '@formily/react'; import { Upload as AntdUpload, Button, Progress, Space, Modal } from 'antd'; import cls from 'classnames'; -import { css } from '@emotion/css'; import { saveAs } from 'file-saver'; import React, { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -64,7 +63,7 @@ Upload.Attachment = connect((props: UploadProps) => { } }; return ( -
+
From b5bdecf33bc12c4909c9e3896175f18117bbc46f Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Tue, 27 Jun 2023 14:10:07 +0800 Subject: [PATCH 5/7] fix: fix the upload status not being updated if the upload was successful --- .../schema-component/antd/upload/Upload.tsx | 81 ++++++++++++------- .../schema-component/antd/upload/shared.ts | 5 +- 2 files changed, 58 insertions(+), 28 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx index 9dce784ccedb..bff06e635a31 100644 --- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx +++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx @@ -1,10 +1,10 @@ import { DeleteOutlined, DownloadOutlined, InboxOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'; import { usePrefixCls } from '@formily/antd/esm/__builtins__'; import { connect, mapProps, mapReadPretty } from '@formily/react'; -import { Upload as AntdUpload, Button, Progress, Space, Modal } from 'antd'; +import { Upload as AntdUpload, Button, Modal, Progress, Space, UploadFile } from 'antd'; import cls from 'classnames'; import { saveAs } from 'file-saver'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app @@ -32,12 +32,16 @@ Upload.Attachment = connect((props: UploadProps) => { const [visible, setVisible] = useState(false); const [fileType, setFileType] = useState<'image' | 'pdf'>(); const { t } = useTranslation(); + const internalFileList = useRef([]); + function closeIFrameModal() { setVisible(false); } useEffect(() => { if (sync) { - setFileList(toFileList(value)); + const fileList = toFileList(value); + setFileList(fileList); + internalFileList.current = fileList; } }, [value, sync]); const uploadProps = useUploadProps({ ...props }); @@ -54,7 +58,7 @@ Upload.Attachment = connect((props: UploadProps) => { setFileType('image'); setVisible(true); setFileIndex(index); - } else if(isPdf(file.extname)) { + } else if (isPdf(file.extname)) { setVisible(true); setFileIndex(index); setFileType('pdf'); @@ -114,6 +118,9 @@ Upload.Attachment = connect((props: UploadProps) => { } const index = prevFileList.indexOf(file); prevFileList.splice(index, 1); + internalFileList.current = internalFileList.current.filter( + (item) => item.uid !== file.uid, + ); onChange(toValue([...prevFileList])); return [...prevFileList]; }); @@ -140,12 +147,17 @@ Upload.Attachment = connect((props: UploadProps) => { listType={'picture-card'} fileList={fileList} onChange={(info) => { + // info.fileList 有 BUG，会导致上传状态一直是 uploading + // 所以这里仿照 antd 源码，自己维护一个 fileList + const list = updateFileList(info.file, internalFileList.current); + internalFileList.current = list; + setSync(false); if (multiple) { if (info.file.status === 'done') { - onChange(toValue(info.fileList)); + onChange(toValue(list)); } - setFileList(info.fileList.map(toItem)); + setFileList(list.map(toItem)); } else { if (info.file.status === 'done') { // TODO(BUG): object 的联动有问题，不响应，折中的办法先置空再赋值 @@ -197,7 +209,7 @@ Upload.Attachment = connect((props: UploadProps) => { ]} /> )} - + {visible && fileType === 'pdf' && ( { footer={[ , - + , ]} width={'85vw'} centered={true} > -
- + background: 'white', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + overflowY: 'auto', + }} + > +
)} @@ -304,3 +320,14 @@ Upload.DraggerV2 = connect( ); export default Upload; + +export function updateFileList(file: UploadFile, fileList: (UploadFile | Readonly)[]) { + const nextFileList = [...fileList]; + const fileIndex = nextFileList.findIndex(({ uid }) => uid === file.uid); + if (fileIndex === -1) { + nextFileList.push(file); + } else { + nextFileList[fileIndex] = file; + } + return nextFileList; +} diff --git a/packages/core/client/src/schema-component/antd/upload/shared.ts b/packages/core/client/src/schema-component/antd/upload/shared.ts index 7bfe51c8ab7b..6bf1c0c0031c 100644 --- a/packages/core/client/src/schema-component/antd/upload/shared.ts +++ b/packages/core/client/src/schema-component/antd/upload/shared.ts @@ -212,7 +212,10 @@ export function useUploadProps({ serviceEr export const toItem = (file) => { if (file?.response?.data) { - file = file.response.data; + file = { + uid: file.uid, + ...file.response.data, + }; } return { ...file, From 9d647260680880a02c2fb4dae403bc40c9688acf Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Tue, 27 Jun 2023 16:57:19 +0800 Subject: [PATCH 6/7] fix(FileSelector): fix uploading --- .../schema-component/antd/preview/Preview.tsx | 31 +++++++++++++++---- .../schema-component/antd/upload/Upload.tsx | 2 +- .../schema-component/antd/upload/shared.ts | 3 +- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/preview/Preview.tsx b/packages/core/client/src/schema-component/antd/preview/Preview.tsx index 948eadea3107..93639118fb90 100644 --- a/packages/core/client/src/schema-component/antd/preview/Preview.tsx +++ b/packages/core/client/src/schema-component/antd/preview/Preview.tsx @@ -1,10 +1,9 @@ import { DeleteOutlined, DownloadOutlined, PlusOutlined } from '@ant-design/icons'; import { connect, mapReadPretty } from '@formily/react'; -import { Upload as AntdUpload, Button, Progress, Space } from 'antd'; +import { Upload as AntdUpload, Button, Progress, Space, UploadFile } from 'antd'; import cls from 'classnames'; -import { css } from '@emotion/css'; import { saveAs } from 'file-saver'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import Lightbox from 'react-image-lightbox'; import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app @@ -33,12 +32,15 @@ export const FileSelector = (props: Props) => { const [photoIndex, setPhotoIndex] = useState(0); const [visible, setVisible] = useState(false); const { t } = useTranslation(); + const internalFileList = useRef([]); // 兼容旧版本 const showSelectButton = selectFile === undefined && quickUpload === undefined; useEffect(() => { - setFileList(toFileList(value)); + const fileList = toFileList(value); + setFileList(fileList); + internalFileList.current = fileList; }, [value]); const handleRemove = (file) => { @@ -114,6 +116,7 @@ export const FileSelector = (props: Props) => { icon={} onClick={() => { handleRemove(file); + internalFileList.current = internalFileList.current.filter((item) => item.uid !== file.uid); }} /> )} @@ -166,9 +169,14 @@ export const FileSelector = (props: Props) => { showUploadList={false} onRemove={handleRemove} onChange={(info) => { + // info.fileList 有 BUG，会导致上传状态一直是 uploading + // 所以这里仿照 antd 源码，自己维护一个 fileList + const list = updateFileList(info.file, internalFileList.current); + internalFileList.current = list; + // 如果不在这里 setFileList 的话，会导致 onChange 只会执行一次 - setFileList([...info.fileList]); - uploadProps.onChange?.(info); + setFileList(toFileList(list)); + uploadProps.onChange?.({ fileList: list }); }} >
{ }; export default Preview; + +function updateFileList(file: UploadFile, fileList: (UploadFile | Readonly)[]) { + const nextFileList = [...fileList]; + const fileIndex = nextFileList.findIndex(({ uid }) => uid === file.uid); + if (fileIndex === -1) { + nextFileList.push(file); + } else { + nextFileList[fileIndex] = file; + } + return nextFileList; +} diff --git a/packages/core/client/src/schema-component/antd/upload/Upload.tsx b/packages/core/client/src/schema-component/antd/upload/Upload.tsx index bff06e635a31..a1fef5fce973 100644 --- a/packages/core/client/src/schema-component/antd/upload/Upload.tsx +++ b/packages/core/client/src/schema-component/antd/upload/Upload.tsx @@ -321,7 +321,7 @@ Upload.DraggerV2 = connect( export default Upload; -export function updateFileList(file: UploadFile, fileList: (UploadFile | Readonly)[]) { +function updateFileList(file: UploadFile, fileList: (UploadFile | Readonly)[]) { const nextFileList = [...fileList]; const fileIndex = nextFileList.findIndex(({ uid }) => uid === file.uid); if (fileIndex === -1) { diff --git a/packages/core/client/src/schema-component/antd/upload/shared.ts b/packages/core/client/src/schema-component/antd/upload/shared.ts index 6bf1c0c0031c..a283a5e94086 100644 --- a/packages/core/client/src/schema-component/antd/upload/shared.ts +++ b/packages/core/client/src/schema-component/antd/upload/shared.ts @@ -2,7 +2,6 @@ import { Field } from '@formily/core'; import { useField } from '@formily/react'; import { reaction } from '@formily/reactive'; import { isArr, isValid, toArr as toArray } from '@formily/shared'; -import { UploadChangeParam } from 'antd/es/upload'; import { UploadFile } from 'antd/es/upload/interface'; import { useEffect } from 'react'; import { useAPIClient } from '../../../api-client'; @@ -167,7 +166,7 @@ export const useUploadValidator = (serviceErrorMessage = 'Upload Service Error') export function useUploadProps({ serviceErrorMessage, ...props }: T) { useUploadValidator(serviceErrorMessage); - const onChange = (param: UploadChangeParam) => { + const onChange = (param: { fileList: any[] }) => { props.onChange?.(normalizeFileList([...param.fileList])); }; From f96a65ca512088f2ad5b01e6e0bc3693d866d11e Mon Sep 17 00:00:00 2001 From: Rairn <958414905@qq.com> Date: Tue, 27 Jun 2023 17:35:17 +0800 Subject: [PATCH 7/7] fix: fix key --- .../core/client/src/schema-component/antd/preview/Preview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/client/src/schema-component/antd/preview/Preview.tsx b/packages/core/client/src/schema-component/antd/preview/Preview.tsx index 93639118fb90..df2c32beba61 100644 --- a/packages/core/client/src/schema-component/antd/preview/Preview.tsx +++ b/packages/core/client/src/schema-component/antd/preview/Preview.tsx @@ -72,7 +72,7 @@ export const FileSelector = (props: Props) => { } }; return ( -
+