Refa: files /file API to RESTFul style (#13741)

### What problem does this PR solve?

Files /file API to RESTFul style.

### Type of change

- [x] Documentation Update
- [x] Refactoring

---------

Co-authored-by: writinwaters <cai.keith@gmail.com>
Co-authored-by: Liu An <asiro@qq.com>

web/src/components/new-document-link.tsx

@@ -10,7 +10,7 @@ interface IProps extends React.PropsWithChildren {
   color?: string;
   documentName: string;
   documentId?: string;
-  prefix?: string;
+  resource?: 'document' | 'files';
   className?: string;
 }
 
@@ -21,13 +21,13 @@ const NewDocumentLink = ({
   color = 'rgb(15, 79, 170)',
   documentId,
   documentName,
-  prefix = 'file',
+  resource = 'document',
   className,
 }: IProps) => {
   let nextLink = link;
   const extension = getExtension(documentName);
   if (!link) {
-    nextLink = `/document/${documentId}?ext=${extension}&prefix=${prefix}`;
+    nextLink = `/document/${documentId}?ext=${extension}&resource=${resource}`;
   }
 
   return (

web/src/components/next-message-item/uploaded-message-files.tsx

@@ -19,7 +19,7 @@ function NameWidget({ name, size }: NameWidgetType) {
   return (
     <div className="text-xs max-w-20">
       {/* {id ? (
-        <NewDocumentLink documentId={id} documentName={name} prefix="document">
+        <NewDocumentLink documentId={id} documentName={name} resource="document">
           {name}
         </NewDocumentLink>
       ) : (

web/src/hooks/use-file-request.ts

@@ -78,7 +78,8 @@ export const useUploadFile = () => {
 
 export interface IMoveFileBody {
   src_file_ids: string[];
-  dest_file_id: string; // target folder id
+  dest_file_id?: string;
+  new_name?: string;
 }
 
 export const useMoveFile = () => {
@@ -119,7 +120,8 @@ export const useCreateFolder = () => {
     mutationKey: [FileApiAction.CreateFolder],
     mutationFn: async (params: { parentId: string; name: string }) => {
       const { data } = await fileManagerService.createFolder({
-        ...params,
+        name: params.name,
+        parent_id: params.parentId,
         type: 'folder',
       });
       if (data.code === 0) {
@@ -143,9 +145,10 @@ export const useFetchParentFolderList = () => {
     initialData: [],
     enabled: !!id,
     queryFn: async () => {
-      const { data } = await fileManagerService.getAllParentFolder({
-        fileId: id,
-      });
+      const { data } = await fileManagerService.getAllParentFolder(
+        {},
+        `${id}/ancestors`,
+      );
 
       return data?.data?.parent_folders?.toReversed() ?? [];
     },
@@ -221,7 +224,9 @@ export const useDeleteFile = () => {
   } = useMutation({
     mutationKey: [FileApiAction.DeleteFile],
     mutationFn: async (params: { fileIds: string[]; parentId: string }) => {
-      const { data } = await fileManagerService.removeFile(params);
+      const { data } = await fileManagerService.removeFile({
+        ids: params.fileIds,
+      });
       if (data.code === 0) {
         message.success(t('message.deleted'));
         setPaginationParams(1); // TODO: There should be a better way to paginate the request list
@@ -262,7 +267,10 @@ export const useRenameFile = () => {
   } = useMutation({
     mutationKey: [FileApiAction.RenameFile],
     mutationFn: async (params: { fileId: string; name: string }) => {
-      const { data } = await fileManagerService.renameFile(params);
+      const { data } = await fileManagerService.moveFile({
+        src_file_ids: [params.fileId],
+        new_name: params.name,
+      });
       if (data.code === 0) {
         message.success(t('message.renamed'));
         queryClient.invalidateQueries({

web/src/pages/document-viewer/index.tsx

@@ -1,5 +1,5 @@
 import { Images } from '@/constants/common';
-import { api_host } from '@/utils/api';
+import { ExternalApi, api_host } from '@/utils/api';
 import { useParams, useSearchParams } from 'react-router';
 // import Docx from './docx';
 // import Excel from './excel';
@@ -24,12 +24,16 @@ const DocumentViewer = () => {
   const { id: documentId } = useParams();
   const [currentQueryParameters] = useSearchParams();
   const ext = currentQueryParameters.get('ext');
-  const prefix = currentQueryParameters.get('prefix');
-  const api = `${api_host}/${prefix || 'file'}/get/${documentId}`;
+  const resource =
+    currentQueryParameters.get('resource') === 'files' ? 'files' : 'document';
+  const api =
+    resource === 'files'
+      ? `${ExternalApi}${api_host}/files/${documentId}`
+      : `${api_host}/document/get/${documentId}`;
   // request.head
 
   if (ext === 'html' && documentId) {
-    previewHtmlFile(documentId);
+    previewHtmlFile(documentId, resource);
     return;
   }
 

web/src/pages/files/action-cell.tsx

@@ -124,6 +124,7 @@ export function ActionCell({
         <NewDocumentLink
           documentId={documentId}
           documentName={record.name}
+          resource="files"
           className="text-text-sub-title-invert"
         >
           <Button

web/src/services/file-manager-service.ts

@@ -6,7 +6,6 @@ const {
   listFile,
   removeFile,
   uploadFile,
-  renameFile,
   getAllParentFolder,
   createFolder,
   connectFileToKnowledge,
@@ -23,16 +22,12 @@ const methods = {
   },
   removeFile: {
     url: removeFile,
-    method: 'post',
+    method: 'delete',
   },
   uploadFile: {
     url: uploadFile,
     method: 'post',
   },
-  renameFile: {
-    url: renameFile,
-    method: 'post',
-  },
   getAllParentFolder: {
     url: getAllParentFolder,
     method: 'get',

web/src/utils/api.ts

@@ -161,15 +161,14 @@ export default {
     `${ExternalApi}${api_host}/chatbots/${id}/info`,
 
   // file manager
-  listFile: `${api_host}/file/list`,
-  uploadFile: `${api_host}/file/upload`,
-  removeFile: `${api_host}/file/rm`,
-  renameFile: `${api_host}/file/rename`,
-  getAllParentFolder: `${api_host}/file/all_parent_folder`,
-  createFolder: `${api_host}/file/create`,
+  listFile: `${ExternalApi}${api_host}/files`,
+  uploadFile: `${ExternalApi}${api_host}/files`,
+  removeFile: `${ExternalApi}${api_host}/files`,
+  getAllParentFolder: `${ExternalApi}${api_host}/files`,
+  createFolder: `${ExternalApi}${api_host}/files`,
   connectFileToKnowledge: `${api_host}/file2document/convert`,
-  getFile: `${api_host}/file/get`,
-  moveFile: `${api_host}/file/mv`,
+  getFile: `${ExternalApi}${api_host}/files`,
+  moveFile: `${ExternalApi}${api_host}/files/move`,
 
   // system
   getSystemVersion: `${api_host}/system/version`,

web/src/utils/file-util.ts

@@ -101,8 +101,15 @@ export const getBase64FromUploadFileList = async (fileList?: UploadFile[]) => {
   return '';
 };
 
-async function fetchDocumentBlob(id: string, mimeType?: FileMimeType) {
-  const response = await fileManagerService.getDocumentFile({}, id);
+async function fetchPreviewBlob(
+  id: string,
+  resource: 'document' | 'files',
+  mimeType?: FileMimeType,
+) {
+  const response =
+    resource === 'files'
+      ? await fileManagerService.getFile({}, id)
+      : await fileManagerService.getDocumentFile({}, id);
   const blob = new Blob([response.data], {
     type: mimeType || response.data.type,
   });
@@ -110,8 +117,11 @@ async function fetchDocumentBlob(id: string, mimeType?: FileMimeType) {
   return blob;
 }
 
-export async function previewHtmlFile(id: string) {
-  const blob = await fetchDocumentBlob(id, FileMimeType.Html);
+export async function previewHtmlFile(
+  id: string,
+  resource: 'document' | 'files' = 'document',
+) {
+  const blob = await fetchPreviewBlob(id, resource, FileMimeType.Html);
   const url = URL.createObjectURL(blob);
   const link = document.createElement('a');
   link.href = url;
@@ -137,7 +147,7 @@ export const downloadDocument = async ({
   id: string;
   filename?: string;
 }) => {
-  const blob = await fetchDocumentBlob(id);
+  const blob = await fetchPreviewBlob(id, 'document');
   downloadFileFromBlob(blob, filename);
 };