From 2eb8c626e358abcf14bd597727a3d82c364dda1d Mon Sep 17 00:00:00 2001
From: Amy0104 <97265214+Amy0104@users.noreply.github.com>
Date: Thu, 12 May 2022 16:54:03 +0800
Subject: [PATCH] [Fix][UI] Support only one file upload on the file manage
 page. (#10007)

(cherry picked from commit 18bfe6399d5faa69f84d7b673269a96f8082ead6)
---
 .../src/views/resource/file/upload/index.tsx     | 16 +++++++++++++++-
 .../src/views/resource/file/upload/use-form.ts   |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx b/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
index 035b5a715a..b2aee1fabe 100644
--- a/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
+++ b/dolphinscheduler-ui/src/views/resource/file/upload/index.tsx
@@ -44,16 +44,24 @@ export default defineComponent({
     const customRequest = ({ file }: any) => {
       state.uploadForm.name = file.name
       state.uploadForm.file = file.file
+      state.uploadFormNameRef.validate({
+        trigger: 'input'
+      })
     }
 
     const handleFile = () => {
       handleUploadFile(ctx.emit, hideModal, resetForm)
     }
 
+    const removeFile = () => {
+      state.uploadForm.name = ''
+    }
+
     return {
       hideModal,
       customRequest,
       handleFile,
+      removeFile,
       ...toRefs(state)
     }
   },
@@ -70,7 +78,11 @@ export default defineComponent({
         confirmLoading={this.saving}
       >
         <NForm rules={this.rules} ref='uploadFormRef'>
-          <NFormItem label={t('resource.file.file_name')} path='name'>
+          <NFormItem
+            label={t('resource.file.file_name')}
+            path='name'
+            ref='uploadFormNameRef'
+          >
             <NInput
               v-model={[this.uploadForm.name, 'value']}
               placeholder={t('resource.file.enter_name_tips')}
@@ -90,6 +102,8 @@ export default defineComponent({
               v-model={[this.uploadForm.file, 'value']}
               customRequest={this.customRequest}
               class='btn-upload'
+              max={1}
+              onRemove={this.removeFile}
             >
               <NButton>{t('resource.file.upload_files')}</NButton>
             </NUpload>
diff --git a/dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts b/dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts
index 58ec7dbe2b..6dff47db32 100644
--- a/dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts
+++ b/dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts
@@ -36,6 +36,7 @@ export function useForm() {
 
   const state = reactive({
     uploadFormRef: ref(),
+    uploadFormNameRef: ref(),
     uploadForm: defaultValue(),
     saving: false,
     rules: {