feat: update upload components (#1857)

# Description

Please include a summary of the change and which issue is fixed. Please
also include relevant motivation and context. List any dependencies that
are required for this change.

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration

# Snapshots:

Include snapshots for easier review.

# Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have already rebased the commits and make the commit message
conform to the project standard.
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] Any dependent changes have been merged and published in downstream
modules

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: '打开代码编辑器',

web/components/flow/node-renderer/upload.tsx

@@ -1,37 +1,72 @@
-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 [uploadType, setUploadType] = useState('');
 
+  const getUploadSuccessUrl = (url: string) => {
+    if (urlList.current.length === data.ui.attr.max_count) {
+      urlList.current.pop();
+    }
+    urlList.current.push(url)
+
+    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') {
+      }
+      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')}`);
+      }
+    },
+  };
+
+  if (data.ui?.file_types && Array.isArray(data.ui?.file_types)) {
+    setUploadType(data.ui?.file_types.toString())
+  }
   return (
     <div className="p-2 text-sm text-center">
-      <Upload {...attr}   {...props}>
-        <Button icon={<UploadOutlined />}>{t('UploadData')}</Button>
-      </Upload>
+      {data.is_list ? <Upload onRemove={handleFileRemove}   {...props} {...attr} multiple={true} accept={uploadType}>
+        <Button loading={uploading} icon={<UploadOutlined />}>{t('UploadData')}</Button>
+      </Upload> : <Upload onRemove={handleFileRemove}  {...props} {...attr} multiple={false} accept={uploadType}>
+        <Button loading={uploading} icon={<UploadOutlined />}>{t('UploadData')}</Button>
+      </Upload>}
+
     </div>
   )
 

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;