From 4736b80dd2b4c05e059f124719ba592f502cd68b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E5=BF=97=E5=8B=87?=
 <yanzhiyong@tiansuixiansheng.com>
Date: Tue, 20 Aug 2024 21:42:31 +0800
Subject: [PATCH] feat: Component Upload complete

---
 web/app/i18n.ts                              |  4 ++
 web/components/flow/node-renderer/upload.tsx | 58 +++++++++++++++-----
 web/types/flow.ts                            |  2 +
 3 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/web/app/i18n.ts b/web/app/i18n.ts
index a03216c55..b15332d35 100644
--- a/web/app/i18n.ts
+++ b/web/app/i18n.ts
@@ -2,6 +2,8 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
 const en = {
+  UploadDataSuccessfully: 'file uploaded successfully',
+  UploadDataFailed: 'file upload failed',
   UploadData: 'Upload Data',
   CodeEditor: 'Code Editor:',
   openCodeEditor:'Open Code Editor',
@@ -237,6 +239,8 @@ export interface Resources {
 }
 
 const zh: Resources['translation'] = {
+  UploadDataSuccessfully: '文件上传成功',
+  UploadDataFailed: '文件上传失败',
   UploadData: '上传数据',
   CodeEditor: '代码编辑:',
   openCodeEditor: '打开代码编辑器',
diff --git a/web/components/flow/node-renderer/upload.tsx b/web/components/flow/node-renderer/upload.tsx
index 9f2944af7..0f2a433c2 100644
--- a/web/components/flow/node-renderer/upload.tsx
+++ b/web/components/flow/node-renderer/upload.tsx
@@ -1,37 +1,67 @@
-import React from 'react';
+import React,{useState,useRef}from 'react';
 import { UploadOutlined } from '@ant-design/icons';
 import type { UploadProps } from 'antd';
-import { Button, Upload } from 'antd';
+import { Button, Upload,message } from 'antd';
 import { convertKeysToCamelCase } from '@/utils/flow';
 import { IFlowNodeParameter } from '@/types/flow';
 import { useTranslation } from 'react-i18next';
 
-const props: UploadProps = {
-  name: 'file',
-  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
-  headers: {
-    authorization: 'authorization-text',
-  },
-};
-
 type Props = {
   data: IFlowNodeParameter;
   defaultValue: any;
   onChange: (value: any) => void;
 };
-
 export const RenderUpload = (params: Props) => {
   const { t } = useTranslation();
+  const urlList =useRef<string[]>([]);
 
   const { data, defaultValue, onChange } = params;
 
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
+  const [uploading, setUploading] = useState(false);
 
+  const getUploadSuccessUrl = (url:string) => {
+    if (urlList.current.length === data.ui.attr.max_count) {
+      urlList.current.pop();
+    }
+    urlList.current.push(url)
+    console.log('上传数据'+urlList.current);
+    
+    onChange(urlList.current.toString())
+  }
+  const handleFileRemove = (file:any) => {
+    const index = urlList.current.indexOf(file.response.data[0].uri);
+    if (index !== -1) {
+      urlList.current.splice(index, 1);
+    }
+    onChange(urlList.current.toString())
+  }
+  const props: UploadProps = {
+    name: 'files',
+    action: process.env.API_BASE_URL + data.ui.action,
+    headers: {
+      'authorization': 'authorization-text',
+    },
+    onChange(info) {
+      setUploading(true)
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList);
+      }
+      if (info.file.status === 'done') {
+        setUploading(false)
+        message.success(`${info.file.response.data[0].file_name} ${t('UploadDataSuccessfully')}`);
+        getUploadSuccessUrl(info.file.response.data[0].uri)
+      } else if (info.file.status === 'error') {
+        setUploading(false)
+        message.error(`${info.file.response.data[0].file_name}  ${t('UploadDataFailed')}`);
+      }
+    },
+  };
   return (
     <div className="p-2 text-sm text-center">
-      <Upload {...attr}   {...props}>
-        <Button icon={<UploadOutlined />}>{t('UploadData')}</Button>
-      </Upload>
+    <Upload onRemove={handleFileRemove}  {...props} {...attr} multiple={false} accept={data.ui?.file_types}>
+      <Button   loading={uploading}  icon={<UploadOutlined />}>{t('UploadData')}</Button>
+    </Upload>
     </div>
   )
 
diff --git a/web/types/flow.ts b/web/types/flow.ts
index 07b193d75..6a307ec1d 100644
--- a/web/types/flow.ts
+++ b/web/types/flow.ts
@@ -71,6 +71,8 @@ export type IFlowNodeParameter = {
 export type IFlowNodeParameterUI = {
   ui_type: string;
   language: string;
+  file_types: string;
+  action: string;
   attr: {
     disabled: boolean;
     [key: string]: any;