fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 21:49:25 +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

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