From dcf42767be130b6ffb607e83fe3dfb32c54213e7 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 8 Sep 2022 11:40:30 +0800
Subject: [PATCH] fix: failed to upload theme and plugin

---
 .../themes/components/ThemeInstallModal.vue   | 40 ++++-----
 .../plugins/components/PluginInstallModal.vue | 86 +++++++++----------
 2 files changed, 60 insertions(+), 66 deletions(-)

diff --git a/src/modules/interface/themes/components/ThemeInstallModal.vue b/src/modules/interface/themes/components/ThemeInstallModal.vue
index 15a01884a..d766067e7 100644
--- a/src/modules/interface/themes/components/ThemeInstallModal.vue
+++ b/src/modules/interface/themes/components/ThemeInstallModal.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
 import { VModal } from "@halo-dev/components";
-import VueFilePond from "vue-filepond";
-import "filepond/dist/filepond.min.css";
+import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@halo-dev/admin-shared";
-
-const FilePond = VueFilePond();
+import { computed, ref } from "vue";
 
 withDefaults(
   defineProps<{
@@ -20,26 +18,25 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
+const FilePondUploadRef = ref();
+
 const handleVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
     emit("close");
+    FilePondUploadRef.value.handleRemoveFiles();
   }
 };
 
-const server = {
-  process: (fieldName, file, metadata, load) => {
-    const formData = new FormData();
-    formData.append(fieldName, file, file.name);
-
-    apiClient.theme.installTheme(file).then((response) => {
-      load(response);
-      handleVisibleChange(false);
-    });
-
-    return {};
-  },
-};
+const uploadHandler = computed(() => {
+  return (file, config) =>
+    apiClient.theme.installTheme(
+      {
+        file: file,
+      },
+      config
+    );
+});
 </script>
 <template>
   <VModal
@@ -48,12 +45,11 @@ const server = {
     title="安装主题"
     @update:visible="handleVisibleChange"
   >
-    <file-pond
-      ref="pond"
+    <FilePondUpload
+      ref="FilePondUploadRef"
       :allow-multiple="false"
-      :server="server"
-      label-idle="Drop ZIP file here..."
-      name="file"
+      :handler="uploadHandler"
+      label-idle="点击选择文件或者拖拽文件到此处"
     />
   </VModal>
 </template>
diff --git a/src/modules/system/plugins/components/PluginInstallModal.vue b/src/modules/system/plugins/components/PluginInstallModal.vue
index d751eb527..3e76c2230 100644
--- a/src/modules/system/plugins/components/PluginInstallModal.vue
+++ b/src/modules/system/plugins/components/PluginInstallModal.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
 import { useDialog, VModal } from "@halo-dev/components";
-import VueFilePond from "vue-filepond";
-import "filepond/dist/filepond.min.css";
+import FilePondUpload from "@/components/upload/FilePondUpload.vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Plugin } from "@halo-dev/api-client";
-
-const FilePond = VueFilePond();
+import { computed, ref } from "vue";
+import type { AxiosResponse } from "axios";
 
 withDefaults(
   defineProps<{
@@ -22,52 +21,51 @@ const emit = defineEmits<{
 }>();
 
 const dialog = useDialog();
+const FilePondUploadRef = ref();
 
 const handleVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
     emit("close");
+    FilePondUploadRef.value.handleRemoveFiles();
   }
 };
 
-const server = {
-  process: (fieldName, file, metadata, load) => {
-    const formData = new FormData();
-    formData.append(fieldName, file, file.name);
+const uploadHandler = computed(() => {
+  return (file, config) =>
+    apiClient.plugin.installPlugin(
+      {
+        file: file,
+      },
+      config
+    );
+});
 
-    apiClient.plugin.installPlugin(file).then((response) => {
-      load(response);
+const onUploaded = async (response: AxiosResponse) => {
+  const plugin = response.data as Plugin;
+  handleVisibleChange(false);
+  dialog.success({
+    title: "上传成功",
+    description: "是否启动当前安装的插件？",
+    onConfirm: async () => {
+      try {
+        const { data: pluginToUpdate } =
+          await apiClient.extension.plugin.getpluginHaloRunV1alpha1Plugin({
+            name: plugin.metadata.name,
+          });
+        pluginToUpdate.spec.enabled = true;
 
-      const plugin: Plugin = response.data as unknown as Plugin;
+        await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin({
+          name: pluginToUpdate.metadata.name,
+          plugin: pluginToUpdate,
+        });
 
-      handleVisibleChange(false);
-
-      dialog.success({
-        title: "上传成功",
-        description: "是否启动当前安装的插件？",
-        onConfirm: async () => {
-          try {
-            const { data: pluginToUpdate } =
-              await apiClient.extension.plugin.getpluginHaloRunV1alpha1Plugin({
-                name: plugin.metadata.name,
-              });
-            pluginToUpdate.spec.enabled = true;
-
-            await apiClient.extension.plugin.updatepluginHaloRunV1alpha1Plugin({
-              name: pluginToUpdate.metadata.name,
-              plugin: pluginToUpdate,
-            });
-
-            window.location.reload();
-          } catch (e) {
-            console.error(e);
-          }
-        },
-      });
-    });
-
-    return {};
-  },
+        window.location.reload();
+      } catch (e) {
+        console.error(e);
+      }
+    },
+  });
 };
 </script>
 <template>
@@ -77,12 +75,12 @@ const server = {
     title="安装插件"
     @update:visible="handleVisibleChange"
   >
-    <file-pond
-      ref="pond"
+    <FilePondUpload
+      ref="FilePondUploadRef"
       :allow-multiple="false"
-      :server="server"
-      label-idle="Drop JAR file here..."
-      name="file"
+      :handler="uploadHandler"
+      label-idle="点击选择文件或者拖拽文件到此处"
+      @uploaded="onUploaded"
     />
   </VModal>
 </template>