fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 13:39:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(client): fix uploaded files missing (#6247)

Browse Source 
* fix(client): fix uploaded files missing

* fix(client): test case
This commit is contained in:
Junyi 2025-02-19 23:10:00 +08:00 committed by GitHub
parent 43e71edf69
commit 81ff3741a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/core/client/src/schema-component/antd/upload/Upload.tsx
View File

@ -356,6 +356,7 @@ export function AttachmentList(props) {
export function Uploader({ rules, ...props }: UploadProps) {
const { disabled, multiple, value, onChange, toValueItem = toValueItemDefault } = props;
const [uploadedList, setUploadedList] = useState<any[]>([]);
const [pendingList, setPendingList] = useState<any[]>([]);
const { t } = useTranslation();
const { componentCls: prefixCls } = useStyles();
@ -379,28 +380,32 @@ export function Uploader({ rules, ...props }: UploadProps) {
const onUploadChange = useCallback(
(info) => {
const pendingFiles = info.fileList.filter((file) => file.status !== 'done').map(normalizeFile);
setPendingList(pendingFiles);
if (multiple) {
const uploadedList = info.fileList.filter((file) => file.status === 'done');
if (uploadedList.length) {
const valueList = [...(value ?? []), ...uploadedList.map((v) => toValueItem(v.response?.data))];
onChange?.(valueList);
const uploaded = info.fileList.filter((file) => file.status === 'done');
if (uploaded.length) {
const valueList = [...uploadedList, ...uploaded.map((v) => toValueItem(v.response?.data))];
if (pendingFiles.length) {
setUploadedList(valueList);
} else {
setUploadedList([]);
onChange?.(valueList);
}
}
setPendingList(info.fileList.filter((file) => file.status !== 'done').map(normalizeFile));
} else {
// NOTE: 用 fileList 里的才有附加的验证状态信息，file 没有（不清楚为何）
const file = info.fileList.find((f) => f.uid === info.file.uid);
if (file.status === 'done') {
onChange?.(toValueItem(file.response?.data));
setPendingList([]);
} else {
setPendingList([normalizeFile(file)]);
}
}
},
[value, multiple, onChange],
[multiple, uploadedList, toValueItem, onChange],
);
const onDelete = useCallback((file) => {
const onDeletePending = useCallback((file) => {
setPendingList((prevPendingList) => {
const index = prevPendingList.indexOf(file);
prevPendingList.splice(index, 1);
@ -408,6 +413,14 @@ export function Uploader({ rules, ...props }: UploadProps) {
});
}, []);
const onDeleteUploaded = useCallback((file) => {
setUploadedList((prevUploadedList) => {
const index = prevUploadedList.indexOf(file);
prevUploadedList.splice(index, 1);
return [...prevUploadedList];
});
}, []);
const QRCodeUploader = useComponent('QRCodeUploader');
const { mimetype: accept, size } = rules ?? {};
@ -416,8 +429,11 @@ export function Uploader({ rules, ...props }: UploadProps) {
!disabled && (multiple || ((!value || (Array.isArray(value) && !value.length)) && !pendingList.length));
return (
<>
{uploadedList.map((file, index) => (
<AttachmentListItem key={file.id} file={file} index={index} disabled={disabled} onDelete={onDeleteUploaded} />
))}
{pendingList.map((file, index) => (
<AttachmentListItem key={file.uid} file={file} index={index} disabled={disabled} onDelete={onDelete} />
<AttachmentListItem key={file.uid} file={file} index={index} disabled={disabled} onDelete={onDeletePending} />
))}
<div
className={cls(`${prefixCls}-list-picture-card-container`, `${prefixCls}-list-item-container`)}

2
packages/core/client/src/schema-component/antd/upload/__tests__/upload.test.tsx
View File

@ -119,7 +119,7 @@ describe('Upload', () => {
await userEvent.upload(document.querySelector('input[type="file"]'), file);
await waitFor(() => {
expect(document.querySelectorAll('.ant-upload-list-item-image')).toHaveLength(2);
expect(document.querySelectorAll('.ant-upload-list-item-image')).toHaveLength(1);
});
});