Feat: Upload document #3221 (#7209)

### What problem does this PR solve?

Feat: Upload document #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/files/hooks.ts

@@ -6,11 +6,9 @@ import {
   useFetchParentFolderList,
   useMoveFile,
   useRenameFile,
-  useUploadFile,
 } from '@/hooks/file-manager-hooks';
 import { IFile } from '@/interfaces/database/file-manager';
 import { TableRowSelection } from 'antd/es/table/interface';
-import { UploadFile } from 'antd/lib';
 import { useCallback, useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'umi';
 
@@ -157,37 +155,6 @@ export const useHandleDeleteFile = (
   return { handleRemoveFile };
 };
 
-export const useHandleUploadFile = () => {
-  const {
-    visible: fileUploadVisible,
-    hideModal: hideFileUploadModal,
-    showModal: showFileUploadModal,
-  } = useSetModalState();
-  const { uploadFile, loading } = useUploadFile();
-  const id = useGetFolderId();
-
-  const onFileUploadOk = useCallback(
-    async (fileList: UploadFile[]): Promise<number | undefined> => {
-      if (fileList.length > 0) {
-        const ret: number = await uploadFile({ fileList, parentId: id });
-        if (ret === 0) {
-          hideFileUploadModal();
-        }
-        return ret;
-      }
-    },
-    [uploadFile, hideFileUploadModal, id],
-  );
-
-  return {
-    fileUploadLoading: loading,
-    onFileUploadOk,
-    fileUploadVisible,
-    hideFileUploadModal,
-    showFileUploadModal,
-  };
-};
-
 export const useHandleConnectToKnowledge = () => {
   const {
     visible: connectToKnowledgeVisible,

web/src/pages/files/index.tsx

@@ -1,15 +1,32 @@
+import { FileUploadDialog } from '@/components/file-upload-dialog';
 import ListFilterBar from '@/components/list-filter-bar';
 import { Upload } from 'lucide-react';
 import { FilesTable } from './files-table';
+import { useHandleUploadFile } from './use-upload-file';
 
 export default function Files() {
+  const {
+    fileUploadVisible,
+    hideFileUploadModal,
+    showFileUploadModal,
+    fileUploadLoading,
+    onFileUploadOk,
+  } = useHandleUploadFile();
+
   return (
     <section className="p-8">
-      <ListFilterBar title="Files">
+      <ListFilterBar title="Files" showDialog={showFileUploadModal}>
         <Upload />
         Upload file
       </ListFilterBar>
       <FilesTable></FilesTable>
+      {fileUploadVisible && (
+        <FileUploadDialog
+          hideModal={hideFileUploadModal}
+          onOk={onFileUploadOk}
+          loading={fileUploadLoading}
+        ></FileUploadDialog>
+      )}
     </section>
   );
 }

web/src/pages/files/use-upload-file.ts

@@ -0,0 +1,35 @@
+import { useSetModalState } from '@/hooks/common-hooks';
+import { useUploadFile } from '@/hooks/use-file-request';
+import { useCallback } from 'react';
+import { useGetFolderId } from './hooks';
+
+export const useHandleUploadFile = () => {
+  const {
+    visible: fileUploadVisible,
+    hideModal: hideFileUploadModal,
+    showModal: showFileUploadModal,
+  } = useSetModalState();
+  const { uploadFile, loading } = useUploadFile();
+  const id = useGetFolderId();
+
+  const onFileUploadOk = useCallback(
+    async (fileList: File[]): Promise<number | undefined> => {
+      if (fileList.length > 0) {
+        const ret: number = await uploadFile({ fileList, parentId: id });
+        if (ret === 0) {
+          hideFileUploadModal();
+        }
+        return ret;
+      }
+    },
+    [uploadFile, hideFileUploadModal, id],
+  );
+
+  return {
+    fileUploadLoading: loading,
+    onFileUploadOk,
+    fileUploadVisible,
+    hideFileUploadModal,
+    showFileUploadModal,
+  };
+};