feat(magent-ui knowledge): upload component use custom request

packages/magent-ui/src/magent_ui/routers/knowledge/router.py

@@ -31,5 +31,4 @@ async def delete_knowledge(knowledge_id: str):
 
 @router.post("/knowledge/upload")
 async def upload_knowledge_file(knowledge_id: Annotated[str, Body()], file: UploadFile = File(...)):
-    print('here')
     return await AsyncTask.to_thread(KnowledgeService.upload_knowledge_file, knowledge_id, file)

web-apps/ui/src/modules/knowledge/knowledge-manager.ts

@@ -53,4 +53,22 @@ export class KnowledgeManager {
     this.cache.set(tool.id, tool);
     return tool;
   };
+
+  uploadFile = async (options: {
+    knowledge_id: string;
+    file: File;
+  }): Promise<boolean> => {
+    // create FormData object for multipart/form-data upload
+    const formData = new FormData();
+    formData.append('knowledge_id', options.knowledge_id); // add knowledge_id
+    formData.append('file', options.file); // add file
+
+    // send request via axios
+    const res = await this.axios.post<string>('/api/v1/knowledge/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data', // specify multipart/form-data
+      },
+    });
+    return Boolean(res.data);
+  };
 }

web-apps/ui/src/views/knowledge/upload-view.tsx

@@ -1,6 +1,13 @@
 import { InboxOutlined } from '@ant-design/icons';
-import { BaseView, inject, singleton, view } from '@difizen/mana-app';
-import { message, Upload } from 'antd';
+import {
+  BaseView,
+  inject,
+  singleton,
+  useInject,
+  view,
+  ViewInstance,
+} from '@difizen/mana-app';
+import { message, Upload, UploadProps } from 'antd';
 import { forwardRef } from 'react';
 import { history } from 'umi';
 import { useParams } from 'umi';
@@ -9,6 +16,7 @@ import { MainView } from '@/modules/base-layout/main-view.js';
 import type { NavigatablePage } from '@/modules/base-layout/protocol.js';
 
 import './index.less';
+import { KnowledgeManager } from '@/modules/knowledge/knowledge-manager.js';
 
 const { Dragger } = Upload;
 
@@ -18,17 +26,16 @@ export const uploadslot = `${viewId}-slot`;
 const KnowledgeUploadComponent = forwardRef<HTMLDivElement>(
   function KnowledgeUploadComponent() {
     const { knowledgeId } = useParams();
+
+    const instance = useInject<KnowledgeUploadView>(ViewInstance);
+
     return (
       <div className={`${viewId}-wrapper`}>
         <Dragger
           className={`${viewId}-dragger`}
           name="file"
           multiple
-          data={{
-            knowledge_id: knowledgeId,
-          }}
           method="post"
-          action="/api/v1/knowledge/upload"
           listType="picture"
           onChange={(info) => {
             const { status } = info.file;
@@ -38,7 +45,18 @@ const KnowledgeUploadComponent = forwardRef<HTMLDivElement>(
               message.error(`${info.file.name} file upload failed.`);
             }
           }}
-          // onDrop={(e) => {}}
+          customRequest={async (info) => {
+            const { file, onSuccess, onError } = info;
+            const succ = await instance.manager.uploadFile({
+              knowledge_id: knowledgeId,
+              file: file as File,
+            });
+            if (succ) {
+              onSuccess?.('上传成功');
+            } else {
+              onError?.(new Error('上传失败'));
+            }
+          }}
         >
           <p className="ant-upload-drag-icon">
             <InboxOutlined />
@@ -59,6 +77,8 @@ const KnowledgeUploadComponent = forwardRef<HTMLDivElement>(
 export class KnowledgeUploadView extends BaseView implements NavigatablePage {
   @inject(MainView) protected mainView: MainView;
 
+  @inject(KnowledgeManager) manager: KnowledgeManager;
+
   override view = KnowledgeUploadComponent;
 
   override onViewUnmount(): void {