ow

WebVue/src/components/basic/OperatorStation.vue

@@ -84,11 +84,9 @@
 
     </a-col>
   </a-row>
-  <div style="display: none">
-    <a-upload v-if="canCreate" v-model:file-list="fileList" name="file" :before-upload="onBeforeUpload"
-      :headers="headers" :show-upload-list="false" :action="uploadUrl" ref="uploadRef">
-    </a-upload>
-  </div>
+  <FileUpload v-if="canCreate" ref="fileUploadRef" :action="uploadUrl" :headers="headers"
+    :resolve-file-path="resolveFilePath" @start="onUploadStart" @progress="onUploadProgress"
+    @success="onUploadSuccess" @error="onUploadError" />
 </template>
 
 <script setup lang="ts">
@@ -110,12 +108,13 @@ import {
   DownOutlined,
 } from "@ant-design/icons-vue";
 import { DmsFileUploadViewDisplayData } from "@/data/auto/dmsFileUploadViewDisplayData";
-import type { UploadProps } from "ant-design-vue";
+import FileUpload from "@/components/basic/FileUpload.vue";
 
 const props = defineProps<{
   selectedItems: DmsFileUploadViewDisplayData[];
   uploadUrl: string;
   headers: any;
+  resolveFilePath?: () => string | Promise<string>;
   canCreate: boolean;
   canAmend: boolean;
   canDelete: boolean;
@@ -124,7 +123,10 @@ const props = defineProps<{
 
 const emit = defineEmits([
   "create-folder",
-  "before-upload",
+  "upload-start",
+  "upload-progress",
+  "upload-success",
+  "upload-error",
   "download",
   "share",
   "publish",
@@ -139,8 +141,7 @@ const emit = defineEmits([
   "delete",
 ]);
 
-const fileList = ref<UploadProps["fileList"]>([]);
-const uploadRef = ref<any>(null);
+const fileUploadRef = ref<any>(null);
 
 const hasSelection = computed(() => props.selectedItems.length > 0);
 const isDirectorySelected = computed(() =>
@@ -194,12 +195,23 @@ const previewTooltip = computed(() => {
 });
 
 const triggerUpload = () => {
-  uploadRef.value?.$el?.querySelector("input")?.click();
+  fileUploadRef.value?.trigger();
 };
 
-const onBeforeUpload: UploadProps["beforeUpload"] = (file) => {
-  emit("before-upload", file);
-  return false;
+const onUploadStart = (file: File) => {
+  emit("upload-start", file);
+};
+
+const onUploadProgress = (payload: any) => {
+  emit("upload-progress", payload);
+};
+
+const onUploadSuccess = (payload: any) => {
+  emit("upload-success", payload);
+};
+
+const onUploadError = (error: unknown) => {
+  emit("upload-error", error);
 };
 
 const onDownload = () => {