[Feature][UI] Batch upload files.

dolphinscheduler-ui/src/locales/modules/en_US.ts

@@ -225,7 +225,7 @@ const resource = {
     folder_name: 'Folder Name',
     enter_name_tips: 'Please enter name',
     enter_description_tips: 'Please enter description',
-    enter_content_tips: 'Please enter the resource content',
+    enter_content_tips: 'Please select the files to upload',
     file_format: 'File Format',
     file_content: 'File Content',
     delete_confirm: 'Delete?',
@@ -234,7 +234,8 @@ const resource = {
     success: 'Success',
     file_details: 'File Details',
     return: 'Return',
-    save: 'Save'
+    save: 'Save',
+    upload_tips: 'Click or drag files to this area to upload.'
   },
   udf: {
     udf_resources: 'UDF resources',

dolphinscheduler-ui/src/locales/modules/zh_CN.ts

@@ -223,7 +223,7 @@ const resource = {
     folder_name: '文件夹名称',
     enter_name_tips: '请输入名称',
     enter_description_tips: '请输入描述',
-    enter_content_tips: '请输入资源内容',
+    enter_content_tips: '请选择上传的资源',
     enter_suffix_tips: '请输入文件后缀',
     file_format: '文件格式',
     file_content: '文件内容',
@@ -233,7 +233,8 @@ const resource = {
     success: '成功',
     file_details: '文件详情',
     return: '返回',
-    save: '保存'
+    save: '保存',
+    upload_tips: '点击或者拖动文件到该区域来上传'
   },
   udf: {
     udf_resources: 'UDF资源',

dolphinscheduler-ui/src/service/modules/resources/index.ts

@@ -31,7 +31,8 @@ import {
   ListReq,
   ViewResourceReq,
   ResourceIdReq,
-  UdfFuncReq
+  UdfFuncReq,
+  FileType
 } from './types'
 
 export function queryResourceListPaging(
@@ -72,6 +73,19 @@ export function createResource(
   })
 }
 
+export function resourceBatchUpload(data: {
+  type: FileType
+  files: File[]
+  pid: string
+  currentDir: string
+}): any {
+  return axios({
+    url: '/resources/batch-upload',
+    method: 'post',
+    data
+  })
+}
+
 export function authorizedFile(params: UserIdReq): any {
   return axios({
     url: '/resources/authed-file',

dolphinscheduler-ui/src/service/modules/resources/types.ts

@@ -118,6 +118,8 @@ interface ResourceViewRes {
   content: string
 }
 
+export type FileType = 'FILE' | 'UDF'
+
 export {
   FileReq,
   ResourceTypeReq,

dolphinscheduler-ui/src/views/resource/file/upload/index.tsx

@@ -15,8 +15,16 @@
  * limitations under the License.
  */
 import { defineComponent, toRefs, PropType } from 'vue'
-import { NButton, NForm, NFormItem, NInput, NUpload } from 'naive-ui'
-
+import {
+  NForm,
+  NFormItem,
+  NUpload,
+  NUploadDragger,
+  NSpace,
+  NIcon,
+  NText
+} from 'naive-ui'
+import { UploadOutlined, LoadingOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import Modal from '@/components/modal'
 import { useForm } from './use-form'
@@ -35,25 +43,21 @@ export default defineComponent({
   emits: ['updateList', 'update:show'],
   setup(props, ctx) {
     const { state, resetForm } = useForm()
-    const { handleUploadFile } = useUpload(state)
+    const { onSelectFile, handleUploadFile } = useUpload(state)
 
     const hideModal = () => {
       ctx.emit('update:show')
     }
 
-    const customRequest = ({ file }: any) => {
-      state.uploadForm.name = file.name
-      state.uploadForm.file = file.file
-    }
-
     const handleFile = () => {
+      console.log(state.uploadForm.files)
       handleUploadFile(ctx.emit, hideModal, resetForm)
     }
 
     return {
       hideModal,
-      customRequest,
       handleFile,
+      onSelectFile,
       ...toRefs(state)
     }
   },
@@ -69,29 +73,17 @@ export default defineComponent({
         cancelClassName='btn-cancel'
         confirmLoading={this.saving}
       >
-        <NForm rules={this.rules} ref='uploadFormRef'>
-          <NFormItem label={t('resource.file.file_name')} path='name'>
-            <NInput
-              v-model={[this.uploadForm.name, 'value']}
-              placeholder={t('resource.file.enter_name_tips')}
-              class='input-file-name'
-            />
-          </NFormItem>
-          <NFormItem label={t('resource.file.description')} path='description'>
-            <NInput
-              type='textarea'
-              v-model={[this.uploadForm.description, 'value']}
-              placeholder={t('resource.file.enter_description_tips')}
-              class='input-description'
-            />
-          </NFormItem>
-          <NFormItem label={t('resource.file.upload_files')} path='file'>
-            <NUpload
-              v-model={[this.uploadForm.file, 'value']}
-              customRequest={this.customRequest}
-              class='btn-upload'
-            >
-              <NButton>{t('resource.file.upload_files')}</NButton>
+        <NForm rules={this.rules} ref='uploadFormRef' model={this.uploadForm}>
+          <NFormItem path='files'>
+            <NUpload class='btn-upload' on-change={this.onSelectFile} multiple>
+              <NUploadDragger>
+                <NSpace vertical>
+                  <NIcon size='48' depth='3'>
+                    {this.saving ? <LoadingOutlined /> : <UploadOutlined />}
+                  </NIcon>
+                  <NText>{t('resource.file.upload_tips')}</NText>
+                </NSpace>
+              </NUploadDragger>
             </NUpload>
           </NFormItem>
         </NForm>

dolphinscheduler-ui/src/views/resource/file/upload/use-form.ts

@@ -20,9 +20,7 @@ import { useI18n } from 'vue-i18n'
 import type { FormRules } from 'naive-ui'
 
 const defaultValue = () => ({
-  name: '',
-  file: '',
-  description: '',
+  files: [],
   pid: -1,
   currentDir: '/'
 })
@@ -39,20 +37,11 @@ export function useForm() {
     uploadForm: defaultValue(),
     saving: false,
     rules: {
-      name: {
+      files: {
         required: true,
         trigger: ['input', 'blur'],
         validator() {
-          if (state.uploadForm.name === '') {
-            return new Error(t('resource.file.enter_name_tips'))
-          }
-        }
-      },
-      file: {
-        required: true,
-        trigger: ['input', 'blur'],
-        validator() {
-          if (state.uploadForm.file === '') {
+          if (state.uploadForm.files.length === 0) {
             return new Error(t('resource.file.enter_content_tips'))
           }
         }

dolphinscheduler-ui/src/views/resource/file/upload/use-upload.ts

@@ -18,9 +18,10 @@
 import { useI18n } from 'vue-i18n'
 import { IEmit } from '../types'
 import { useRouter } from 'vue-router'
-import type { Router } from 'vue-router'
 import { useFileStore } from '@/store/file/file'
-import { createResource } from '@/service/modules/resources'
+import { resourceBatchUpload } from '@/service/modules/resources'
+import type { Router } from 'vue-router'
+import type { UploadFileInfo } from 'naive-ui'
 
 export function useUpload(state: any) {
   const { t } = useI18n()
@@ -40,26 +41,31 @@ export function useUpload(state: any) {
       const pid = router.currentRoute.value.params.id || -1
       const currentDir = fileStore.getCurrentDir || '/'
       const formData = new FormData()
-      formData.append('file', state.uploadForm.file)
+      formData.append('files', state.uploadForm.files)
       formData.append('type', 'FILE')
-      formData.append('name', state.uploadForm.name)
       formData.append('pid', String(pid))
       formData.append('currentDir', currentDir)
-      formData.append('description', state.uploadForm.description)
-
-      await createResource(formData as any)
+      await resourceBatchUpload(formData as any)
       window.$message.success(t('resource.file.success'))
-      state.saving = false
       emit('updateList')
 
       hideModal()
       resetForm()
-    } catch (err) {
+    } finally {
       state.saving = false
     }
   }
 
+  const onSelectFile = (options: {
+    file: UploadFileInfo
+    fileList: Array<UploadFileInfo>
+    event?: Event
+  }) => {
+    state.uploadForm.files = options.fileList
+  }
+
   return {
-    handleUploadFile
+    handleUploadFile,
+    onSelectFile
   }
 }