fix: #567 use modal to upload files in the knowledge base (#601)

### What problem does this PR solve?

fix:  #567 use modal to upload files in the knowledge base

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/add-knowledge/components/knowledge-file/document-toolbar.tsx

@@ -30,9 +30,14 @@ import styles from './index.less';
 interface IProps {
   selectedRowKeys: string[];
   showCreateModal(): void;
+  showDocumentUploadModal(): void;
 }
 
-const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => {
+const DocumentToolbar = ({
+  selectedRowKeys,
+  showCreateModal,
+  showDocumentUploadModal,
+}: IProps) => {
   const { t } = useTranslate('knowledgeDetails');
   const { fetchDocumentList } = useFetchDocumentListOnMount();
   const { setPagination, searchString } = useGetPagination(fetchDocumentList);
@@ -48,7 +53,7 @@ const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => {
     return [
       {
         key: '1',
-        onClick: linkToUploadPage,
+        onClick: showDocumentUploadModal,
         label: (
           <div>
             <Button type="link">
@@ -75,7 +80,7 @@ const DocumentToolbar = ({ selectedRowKeys, showCreateModal }: IProps) => {
         // disabled: true,
       },
     ];
-  }, [linkToUploadPage, showCreateModal, t]);
+  }, [showDocumentUploadModal, showCreateModal, t]);
 
   const handleDelete = useCallback(() => {
     showDeleteConfirm({

web/src/pages/add-knowledge/components/knowledge-file/hooks.ts

@@ -4,13 +4,15 @@ import {
   useFetchDocumentList,
   useSaveDocumentName,
   useSetDocumentParser,
+  useUploadDocument,
 } from '@/hooks/documentHooks';
 import { useGetKnowledgeSearchParams } from '@/hooks/routeHook';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { useFetchTenantInfo } from '@/hooks/userSettingHook';
 import { Pagination } from '@/interfaces/common';
 import { IChangeParserConfigRequestBody } from '@/interfaces/request/document';
-import { PaginationProps } from 'antd';
+import { getUnSupportedFilesCount } from '@/utils/documentUtils';
+import { PaginationProps, UploadFile } from 'antd';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useNavigate, useSelector } from 'umi';
 import { KnowledgeRouteKey } from './constant';
@@ -242,3 +244,42 @@ export const useGetRowSelection = () => {
 
   return rowSelection;
 };
+
+export const useHandleUploadDocument = () => {
+  const {
+    visible: documentUploadVisible,
+    hideModal: hideDocumentUploadModal,
+    showModal: showDocumentUploadModal,
+  } = useSetModalState();
+  const uploadDocument = useUploadDocument();
+
+  const onDocumentUploadOk = useCallback(
+    async (fileList: UploadFile[]): Promise<number | undefined> => {
+      if (fileList.length > 0) {
+        const ret: any = await uploadDocument(fileList);
+        const count = getUnSupportedFilesCount(ret.retmsg);
+        /// 500 error code indicates that some file types are not supported
+        let retcode = ret.retcode;
+        if (
+          ret.retcode === 0 ||
+          (ret.retcode === 500 && count !== fileList.length) // Some files were not uploaded successfully, but some were uploaded successfully.
+        ) {
+          retcode = 0;
+          hideDocumentUploadModal();
+        }
+        return retcode;
+      }
+    },
+    [uploadDocument, hideDocumentUploadModal],
+  );
+
+  const loading = useOneNamespaceEffectsLoading('kFModel', ['upload_document']);
+
+  return {
+    documentUploadLoading: loading,
+    onDocumentUploadOk,
+    documentUploadVisible,
+    hideDocumentUploadModal,
+    showDocumentUploadModal,
+  };
+};

web/src/pages/add-knowledge/components/knowledge-file/index.tsx

@@ -19,6 +19,7 @@ import {
   useFetchDocumentListOnMount,
   useGetPagination,
   useGetRowSelection,
+  useHandleUploadDocument,
   useNavigateToOtherPage,
   useRenameDocument,
 } from './hooks';
@@ -26,6 +27,7 @@ import ParsingActionCell from './parsing-action-cell';
 import ParsingStatusCell from './parsing-status-cell';
 import RenameModal from './rename-modal';
 
+import FileUploadModal from '@/components/file-upload-modal';
 import { formatDate } from '@/utils/date';
 import styles from './index.less';
 
@@ -58,6 +60,13 @@ const KnowledgeFile = () => {
     hideChangeParserModal,
     showChangeParserModal,
   } = useChangeDocumentParser(currentRecord.id);
+  const {
+    documentUploadVisible,
+    hideDocumentUploadModal,
+    showDocumentUploadModal,
+    onDocumentUploadOk,
+    documentUploadLoading,
+  } = useHandleUploadDocument();
   const { t } = useTranslation('translation', {
     keyPrefix: 'knowledgeDetails',
   });
@@ -157,6 +166,7 @@ const KnowledgeFile = () => {
       <DocumentToolbar
         selectedRowKeys={rowSelection.selectedRowKeys as string[]}
         showCreateModal={showCreateModal}
+        showDocumentUploadModal={showDocumentUploadModal}
       ></DocumentToolbar>
       <Table
         rowKey="id"
@@ -190,6 +200,12 @@ const KnowledgeFile = () => {
         hideModal={hideRenameModal}
         initialName={currentRecord.name}
       ></RenameModal>
+      <FileUploadModal
+        visible={documentUploadVisible}
+        hideModal={hideDocumentUploadModal}
+        loading={documentUploadLoading}
+        onOk={onDocumentUploadOk}
+      ></FileUploadModal>
     </div>
   );
 };

web/src/pages/add-knowledge/components/knowledge-file/model.ts

@@ -210,11 +210,15 @@ const model: DvaModel<KFModelState> = {
       }
     },
     *upload_document({ payload = {} }, { call, put }) {
+      const fileList = payload.fileList;
       const formData = new FormData();
-      formData.append('file', payload.file);
       formData.append('kb_id', payload.kb_id);
+      fileList.forEach((file: any) => {
+        formData.append('file', file);
+      });
+
       const { data } = yield call(kbService.document_upload, formData);
-      if (data.retcode === 0) {
+      if (data.retcode === 0 || data.retcode === 500) {
         yield put({
           type: 'getKfList',
           payload: { kb_id: payload.kb_id },