fix: upload files issue

crawlab-team · Jun 18, 2024 · 0f09257 · 0f09257
1 parent b72f33e
commit 0f09257
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 128 deletions.
diff --git a/src/components/file/FileUpload.vue b/src/components/file/FileUpload.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { computed, onBeforeMount, ref, watch } from 'vue';
 import { FILE_UPLOAD_MODE_DIR, FILE_UPLOAD_MODE_FILES } from '@/constants/file';
-import { ElUpload, UploadFile, UploadRawFile } from 'element-plus';
-import { plainClone } from '@/utils/object';
+import { ElUpload, UploadFile } from 'element-plus';
 import { useI18n } from 'vue-i18n';
 import { UploadFilled } from '@element-plus/icons-vue';
 import { sendEvent } from '@/admin/umeng';
-import { FileWithPath } from 'file-selector';
 
 const props = defineProps<{
   mode: FileUploadMode;
@@ -51,31 +49,30 @@ watch(
   () => props.mode,
   () => {
     internalMode.value = props.mode;
-  },
+  }
 );
 
 const onFileChange = (file: UploadFile, fileList: UploadFile[]) => {
   emit(
     'files-change',
-    fileList.map(f => f.raw as FileWithPath),
+    fileList.map(f => f.raw as FileWithPath)
   );
 };
 
 const onDirFilesChange = (e: Event) => {
   const target = e.target as HTMLInputElement;
   const files = Array.from(target.files || [])
     .filter(f => {
-      return !IGNORE_FILE_PATTERN.some(p => new RegExp(p).test(f.webkitRelativePath || ''));
+      return !IGNORE_FILE_PATTERN.some(p =>
+        new RegExp(p).test(f.webkitRelativePath || '')
+      );
     })
-    .map((f: any) => {
+    .map((f: FileWithPath) => {
       f.path = f.webkitRelativePath;
       return f as FileWithPath;
     });
   if (!files) return;
-  emit(
-    'files-change',
-    files,
-  );
+  emit('files-change', files);
 };
 
 const onModeChange = (mode: string) => {
@@ -109,7 +106,54 @@ const onClickUploadDir = () => {
       </el-radio-group>
     </div>
 
-    <template v-if="mode === FILE_UPLOAD_MODE_FILES">
+    <template v-if="mode === FILE_UPLOAD_MODE_DIR">
+      <div class="folder-upload-action-wrapper">
+        <cl-button
+          size="large"
+          class-name="file-upload-action"
+          @click="onClickUploadDir"
+        >
+          <i class="fa fa-folder"></i>
+          {{
+            t(
+              'components.file.upload.buttons.folder.clickToSelectFolderToUpload'
+            )
+          }}
+        </cl-button>
+        <template v-if="uploadInfo?.dirName && uploadInfo?.fileCount">
+          <cl-tag
+            type="primary"
+            class="info-tag"
+            :label="`${uploadInfo?.dirName} (${uploadInfo?.fileCount})`"
+            :icon="['fa', 'folder']"
+          >
+            <template #tooltip>
+              <div>
+                <label>
+                  {{ t('components.file.upload.tooltip.folderName') }}:
+                </label>
+                <span>{{ uploadInfo?.dirName }}</span>
+              </div>
+              <div>
+                <label>
+                  {{ t('components.file.upload.tooltip.filesCount') }}:
+                </label>
+                <span>{{ uploadInfo?.fileCount }}</span>
+              </div>
+            </template>
+          </cl-tag>
+        </template>
+      </div>
+      <input
+        v-show="false"
+        ref="fileInput"
+        type="file"
+        webkitdirectory
+        multiple
+        @change="onDirFilesChange"
+      />
+    </template>
+    <template v-else-if="mode === FILE_UPLOAD_MODE_FILES">
       <el-upload
         ref="uploadRef"
         class="file-upload-action"
@@ -127,36 +171,6 @@ const onClickUploadDir = () => {
           <em>{{ t('components.file.upload.buttons.files.clickToUpload') }}</em>
         </div>
       </el-upload>
-      <!--      <input ref="fileInput" multiple>-->
-    </template>
-    <template v-else-if="mode === FILE_UPLOAD_MODE_DIR">
-      <div class="folder-upload-action-wrapper">
-        <cl-button size="large" class-name="file-upload-action" @click="onClickUploadDir">
-          <i class="fa fa-folder"></i>
-          {{
-            t(
-              'components.file.upload.buttons.folder.clickToSelectFolderToUpload',
-            )
-          }}
-        </cl-button>
-        <template v-if="!!uploadInfo?.dirName && uploadInfo?.fileCount">
-          <cl-tag
-            type="primary"
-            class="info-tag"
-            :label="uploadInfo?.dirName"
-            :icon="['fa', 'folder']"
-            :tooltip="t('components.file.upload.tooltip.fileName')"
-          />
-          <cl-tag
-            type="success"
-            class="info-tag"
-            :label="uploadInfo?.fileCount"
-            :icon="['fa', 'hashtag']"
-            :tooltip="t('components.file.upload.tooltip.filesCount')"
-          />
-        </template>
-      </div>
-      <input v-show="false" ref="fileInput" type="file" webkitdirectory multiple @change="onDirFilesChange">
     </template>
     <div v-if="uploadInfo?.filePaths?.length" class="file-list-wrapper">
       <h4 class="title">

diff --git a/src/components/spider/UploadSpiderFilesDialog.vue b/src/components/spider/UploadSpiderFilesDialog.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 import { useStore } from 'vuex';
 import { ElMessage } from 'element-plus';
-import { FileWithPath } from 'file-selector';
 import { useI18n } from 'vue-i18n';
 import { sendEvent } from '@/admin/umeng';
 import useSpiderService from '@/services/spider/spiderService';
@@ -25,22 +24,21 @@ const { spider: state } = store.state as RootStoreState;
 
 const fileUploadRef = ref<typeof FileUpload>();
 
-const mode = computed(() => state.fileMode);
-const files = computed(() => state.files);
+const mode = ref<FileUploadMode>(FILE_UPLOAD_MODE_DIR);
+const files = ref<FileWithPath[]>([]);
 const fileUploadVisible = computed(
-  () => state.activeDialogKey === 'uploadFiles',
+  () => state.activeDialogKey === 'uploadFiles'
 );
 const name = computed(() => state.form?.name);
 
 const confirmLoading = ref<boolean>(false);
-const confirmDisabled = computed<boolean>(() => !files.value?.length);
+const confirmDisabled = computed<boolean>(() => !files.value.length);
 
 const { activeId } = useSpiderDetail();
 
 const isDetail = computed<boolean>(() => !!activeId.value);
 
-const { listRootDir, saveFileBinary, saveFilesBinary } =
-  useSpiderService(store);
+const { listRootDir, saveFilesBinary } = useSpiderService(store);
 
 const id = computed<string>(() => {
   if (isDetail.value) {
@@ -96,9 +94,8 @@ const uploadFiles = async () => {
     id.value,
     files.value.map((f: FileWithPath) => {
       return { path: getFilePath(f) as string, file: f as File };
-    }),
+    })
   );
-  store.commit(`${ns}/resetFiles`);
   await listRootDir(id.value);
 };
 
@@ -123,32 +120,35 @@ const onUploadConfirm = async () => {
   }
 };
 
-const onModeChange = (value: string) => {
-  store.commit(`${ns}/setFileMode`, value);
+const onModeChange = (value: FileUploadMode) => {
+  mode.value = value;
 };
 
 const onFilesChange = (fileList: FileWithPath[]) => {
   if (!fileList.length) return;
-
-  // set files
-  store.commit(`${ns}/setFiles`, fileList);
+  files.value = fileList;
 
   sendEvent('click_spider_detail_actions_files_change');
 };
 
 const title = computed(() => {
   return (
-    t('components.file.upload.title') +
-    (name.value ? ` - ${name.value}` : '')
+    t('components.file.upload.title') + (name.value ? ` - ${name.value}` : '')
   );
 });
 
+watch(fileUploadVisible, () => {
+  if (!fileUploadVisible.value) {
+    files.value = [];
+  }
+});
+watch(mode, () => {
+  files.value = [];
+});
+
 onBeforeUnmount(() => {
-  store.commit(`${ns}/resetFileMode`);
-  store.commit(`${ns}/resetFiles`);
   store.commit(`${ns}/hideDialog`);
 });
-
 </script>
 
 <template>

diff --git a/src/i18n/lang/zh/components/file.ts b/src/i18n/lang/zh/components/file.ts
@@ -77,7 +77,7 @@ const file: LComponentsFile = {
       files: '文件',
     },
     fileList: {
-      title: '带上传文件',
+      title: '待上传文件',
     },
   },
   actions: {

diff --git a/src/interfaces/components/file/index.d.ts b/src/interfaces/components/file/index.d.ts
@@ -24,19 +24,7 @@ declare global {
     theme: 'vs' | 'vs-dark' | 'hc-black';
   }
 
-  type FileEditorOptionDefinitionType = 'select' | 'input-number' | 'switch';
-
-  interface FileEditorOptionDefinitionData {
-    options?: string[];
-    min?: number;
-    step?: number;
-  }
-
-  interface FileEditorOptionDefinition {
-    name: string;
-    title: string;
-    description: string;
-    type: FileEditorOptionDefinitionType;
-    data?: FileEditorOptionDefinitionData;
+  interface FileWithPath extends File {
+    path?: string;
   }
 }
diff --git a/src/interfaces/store/utils/file.d.ts b/src/interfaces/store/utils/file.d.ts
@@ -1,40 +1,30 @@
-import { FileWithPath } from 'file-selector';
-
-declare global {
-  interface BaseFileStoreState {
-    fileNavItems: FileNavItem[];
-    activeNavItem?: FileNavItem;
-    fileMode: FileUploadMode;
-    files: FileWithPath[];
-    fileContent: string;
-    defaultFilePaths: string[];
-  }
+interface BaseFileStoreState {
+  fileNavItems: FileNavItem[];
+  activeNavItem?: FileNavItem;
+  fileContent: string;
+  defaultFilePaths: string[];
+}
 
-  interface BaseFileStoreMutations<S> {
-    setFileNavItems: StoreMutation<S, FileNavItem[]>;
-    setActiveFileNavItem: StoreMutation<S, FileNavItem>;
-    resetActiveFileNavItem: StoreMutation<S>;
-    setFileMode: StoreMutation<S, string>;
-    resetFileMode: StoreMutation<S>;
-    setFiles: StoreMutation<S, FileWithPath[]>;
-    resetFiles: StoreMutation<S>;
-    setFileContent: StoreMutation<S, string>;
-    resetFileContent: StoreMutation<S>;
-    setDefaultFilePaths: StoreMutation<S, string[]>;
-    resetDefaultFilePaths: StoreMutation<S>;
-  }
+interface BaseFileStoreMutations<S> {
+  setFileNavItems: StoreMutation<S, FileNavItem[]>;
+  setActiveFileNavItem: StoreMutation<S, FileNavItem>;
+  resetActiveFileNavItem: StoreMutation<S>;
+  setFileContent: StoreMutation<S, string>;
+  resetFileContent: StoreMutation<S>;
+  setDefaultFilePaths: StoreMutation<S, string[]>;
+  resetDefaultFilePaths: StoreMutation<S>;
+}
 
-  interface BaseFileStoreActions<S> {
-    listDir: StoreAction<S, FileRequestPayload>;
-    getFile: StoreAction<S, FileRequestPayload>;
-    getFileInfo: StoreAction<S, FileRequestPayload>;
-    saveFile: StoreAction<S, FileRequestPayload>;
-    saveFileBinary: StoreAction<S, FileRequestPayload>;
-    saveFilesBinary: StoreAction<S, SaveFilesRequestPayload>;
-    saveDir: StoreAction<S, FileRequestPayload>;
-    renameFile: StoreAction<S, FileRequestPayload>;
-    deleteFile: StoreAction<S, FileRequestPayload>;
-    copyFile: StoreAction<S, FileRequestPayload>;
-    exportFiles: StoreAction<S, { id: string }>;
-  }
+interface BaseFileStoreActions<S> {
+  listDir: StoreAction<S, FileRequestPayload>;
+  getFile: StoreAction<S, FileRequestPayload>;
+  getFileInfo: StoreAction<S, FileRequestPayload>;
+  saveFile: StoreAction<S, FileRequestPayload>;
+  saveFileBinary: StoreAction<S, FileRequestPayload>;
+  saveFilesBinary: StoreAction<S, SaveFilesRequestPayload>;
+  saveDir: StoreAction<S, FileRequestPayload>;
+  renameFile: StoreAction<S, FileRequestPayload>;
+  deleteFile: StoreAction<S, FileRequestPayload>;
+  copyFile: StoreAction<S, FileRequestPayload>;
+  exportFiles: StoreAction<S, { id: string }>;
 }
diff --git a/src/store/utils/file.ts b/src/store/utils/file.ts
@@ -7,8 +7,6 @@ export const getBaseFileStoreState = (): BaseFileStoreState => {
   return {
     fileNavItems: [],
     activeNavItem: undefined,
-    fileMode: FILE_UPLOAD_MODE_DIR,
-    files: [],
     fileContent: '',
     defaultFilePaths: [],
   };
@@ -27,18 +25,6 @@ export const getBaseFileStoreMutations = <
     resetActiveFileNavItem: (state: S) => {
       state.activeNavItem = undefined;
     },
-    setFileMode: (state: S, mode: FileUploadMode) => {
-      state.fileMode = mode;
-    },
-    resetFileMode: (state: S) => {
-      state.fileMode = FILE_UPLOAD_MODE_DIR;
-    },
-    setFiles: (state: S, files) => {
-      state.files = files;
-    },
-    resetFiles: (state: S) => {
-      state.files = [];
-    },
     setFileContent: (state: S, content: string) => {
       state.fileContent = content;
     },