mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 20:42:30 +08:00
feat: save the selected parser to the backend on the upload file page and upload document (#54)
* feat: add pagination to document table * feat: fetch document list by page * feat: poll the document list * feat: upload document * feat: save the selected parser to the backend on the upload file page
This commit is contained in:
balibabu
@ -1,5 +1,266 @@
|
||||
import { ReactComponent as SelectFilesEndIcon } from '@/assets/svg/select-files-end.svg';
|
||||
import { ReactComponent as SelectFilesStartIcon } from '@/assets/svg/select-files-start.svg';
|
||||
import {
|
||||
useDeleteDocumentById,
|
||||
useGetDocumentDefaultParser,
|
||||
useKnowledgeBaseId,
|
||||
} from '@/hooks/knowledgeHook';
|
||||
import { ITenantInfo } from '@/interfaces/database/knowledge';
|
||||
import uploadService from '@/services/uploadService';
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
FileDoneOutlined,
|
||||
InboxOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Flex,
|
||||
Popover,
|
||||
Progress,
|
||||
Radio,
|
||||
RadioChangeEvent,
|
||||
Space,
|
||||
Upload,
|
||||
UploadFile,
|
||||
UploadProps,
|
||||
} from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { ReactElement, useEffect, useState } from 'react';
|
||||
import { Nullable } from 'typings';
|
||||
import { Link, useDispatch, useNavigate, useSelector } from 'umi';
|
||||
|
||||
import { KnowledgeRouteKey } from '@/constants/knowledge';
|
||||
import styles from './index.less';
|
||||
|
||||
const { Dragger } = Upload;
|
||||
|
||||
type UploadRequestOption = Parameters<
|
||||
NonNullable<UploadProps['customRequest']>
|
||||
>[0];
|
||||
|
||||
const UploaderItem = ({
|
||||
file,
|
||||
actions,
|
||||
isUpload,
|
||||
parserArray,
|
||||
}: {
|
||||
isUpload: boolean;
|
||||
originNode: ReactElement;
|
||||
file: UploadFile;
|
||||
fileList: object[];
|
||||
parserArray: string[];
|
||||
actions: { download: Function; preview: Function; remove: any };
|
||||
}) => {
|
||||
const { parserConfig, defaultParserId } = useGetDocumentDefaultParser(
|
||||
file?.response?.kb_id,
|
||||
);
|
||||
const { removeDocument } = useDeleteDocumentById();
|
||||
const [value, setValue] = useState(defaultParserId);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const documentId = file?.response?.id;
|
||||
|
||||
const onChange = (e: RadioChangeEvent) => {
|
||||
const val = e.target.value;
|
||||
setValue(val);
|
||||
saveParser(val);
|
||||
};
|
||||
|
||||
const content = (
|
||||
<Radio.Group onChange={onChange} value={value}>
|
||||
<Space direction="vertical">
|
||||
{parserArray.map((x) => (
|
||||
<Radio value={x} key={x}>
|
||||
{x}
|
||||
</Radio>
|
||||
))}
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
);
|
||||
|
||||
const handleRemove = async () => {
|
||||
const ret: any = await removeDocument(documentId);
|
||||
if (ret === 0) {
|
||||
actions?.remove();
|
||||
}
|
||||
};
|
||||
|
||||
const saveParser = (parserId: string) => {
|
||||
dispatch({
|
||||
type: 'kFModel/document_change_parser',
|
||||
payload: {
|
||||
parser_id: parserId,
|
||||
doc_id: documentId,
|
||||
parser_config: parserConfig,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setValue(defaultParserId);
|
||||
}, [defaultParserId]);
|
||||
|
||||
return (
|
||||
<Card className={styles.uploaderItem}>
|
||||
<Flex justify="space-between">
|
||||
<FileDoneOutlined className={styles.fileIcon} />
|
||||
<section className={styles.uploaderItemTextWrapper}>
|
||||
<div>
|
||||
<b>{file.name}</b>
|
||||
</div>
|
||||
<span>{file.size}</span>
|
||||
</section>
|
||||
{isUpload ? (
|
||||
<DeleteOutlined
|
||||
className={styles.deleteIcon}
|
||||
onClick={handleRemove}
|
||||
/>
|
||||
) : (
|
||||
<Popover content={content} placement="bottom">
|
||||
<EditOutlined />
|
||||
</Popover>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex>
|
||||
<Progress
|
||||
showInfo={false}
|
||||
percent={100}
|
||||
className={styles.uploaderItemProgress}
|
||||
strokeColor="
|
||||
rgba(127, 86, 217, 1)
|
||||
"
|
||||
/>
|
||||
<span>100%</span>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const KnowledgeUploadFile = () => {
|
||||
return <div>KnowledgeUploadFile</div>;
|
||||
const knowledgeBaseId = useKnowledgeBaseId();
|
||||
const [isUpload, setIsUpload] = useState(true);
|
||||
const dispatch = useDispatch();
|
||||
const tenantIfo: Nullable<ITenantInfo> = useSelector(
|
||||
(state: any) => state.settingModel.tenantIfo,
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const parserArray = tenantIfo?.parser_ids.split(',') ?? [];
|
||||
|
||||
const createRequest: (props: UploadRequestOption) => void = async function ({
|
||||
file,
|
||||
onSuccess,
|
||||
onError,
|
||||
onProgress,
|
||||
}) {
|
||||
const { data } = await uploadService.uploadFile(file, knowledgeBaseId);
|
||||
if (data.retcode === 0) {
|
||||
onSuccess && onSuccess(data.data);
|
||||
} else {
|
||||
onError && onError(data.data);
|
||||
}
|
||||
};
|
||||
|
||||
const props: UploadProps = {
|
||||
name: 'file',
|
||||
multiple: true,
|
||||
itemRender(originNode, file, fileList, actions) {
|
||||
return (
|
||||
<UploaderItem
|
||||
isUpload={isUpload}
|
||||
file={file}
|
||||
fileList={fileList}
|
||||
originNode={originNode}
|
||||
actions={actions}
|
||||
parserArray={parserArray}
|
||||
></UploaderItem>
|
||||
);
|
||||
},
|
||||
customRequest: createRequest,
|
||||
onDrop(e) {
|
||||
console.log('Dropped files', e.dataTransfer.files);
|
||||
},
|
||||
};
|
||||
|
||||
const handleNextClick = () => {
|
||||
if (!isUpload) {
|
||||
navigate(`/knowledge/${KnowledgeRouteKey.Dataset}?id=${knowledgeBaseId}`);
|
||||
} else {
|
||||
setIsUpload(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch({
|
||||
type: 'settingModel/getTenantInfo',
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className={styles.uploadWrapper}>
|
||||
<section>
|
||||
<Space className={styles.backToList}>
|
||||
<ArrowLeftOutlined />
|
||||
<Link to={`/knowledge/dataset?id=${knowledgeBaseId}`}>
|
||||
Back to select files
|
||||
</Link>
|
||||
</Space>
|
||||
<div className={styles.progressWrapper}>
|
||||
<Flex align="center" justify="center">
|
||||
<SelectFilesStartIcon></SelectFilesStartIcon>
|
||||
<Progress
|
||||
percent={100}
|
||||
showInfo={false}
|
||||
className={styles.progress}
|
||||
strokeColor="
|
||||
rgba(127, 86, 217, 1)
|
||||
"
|
||||
/>
|
||||
<SelectFilesEndIcon></SelectFilesEndIcon>
|
||||
</Flex>
|
||||
<Flex justify="space-around">
|
||||
<p className={styles.selectFilesText}>
|
||||
<b>Select files</b>
|
||||
</p>
|
||||
<p className={styles.changeSpecificCategoryText}>
|
||||
<b>Change specific category</b>
|
||||
</p>
|
||||
</Flex>
|
||||
</div>
|
||||
</section>
|
||||
<section className={styles.uploadContent}>
|
||||
<Dragger
|
||||
{...props}
|
||||
className={classNames(styles.uploader, {
|
||||
[styles.hiddenUploader]: !isUpload,
|
||||
})}
|
||||
>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">
|
||||
Click or drag file to this area to upload
|
||||
</p>
|
||||
<p className="ant-upload-hint">
|
||||
Support for a single or bulk upload. Strictly prohibited from
|
||||
uploading company data or other banned files.
|
||||
</p>
|
||||
</Dragger>
|
||||
</section>
|
||||
<section className={styles.footer}>
|
||||
<Button
|
||||
type="primary"
|
||||
className={styles.nextButton}
|
||||
onClick={handleNextClick}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default KnowledgeUploadFile;
|
||||
|
||||
Reference in New Issue
Block a user