เอกสาร/ผลงาน => ปรับ การ upload file

src/modules/13_portfolio/views/Add.vue

@@ -5,6 +5,7 @@ import { useRouter, useRoute } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import axios from "axios";
 import type { QForm } from "quasar";
 
 const router = useRouter();
@@ -20,8 +21,8 @@ const files = ref<any>();
 const name = ref("");
 const detail = ref("");
 const id = ref<string>("");
-const nameFile = ref<string>("");
 const routeName = router.currentRoute.value.name;
+const fileList = ref<any[]>([]);
 
 /**
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
@@ -49,20 +50,13 @@ const saveData = async () => {
  */
 const createTransfer = async () => {
   showLoader();
-  // const formData = new FormData();
-  // formData.append("name", name.value);
-  // formData.append("detail", detail.value);
-  // formData.append("file", files.value);
   await http
     .post(config.API.portfolio, { name: name.value, detail: detail.value })
-    .then((res: any) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      router.push(`/portfolio`);
+    .then(async (res) => {
+      uploadFiles(res.data.result);
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
       hideLoader();
     });
 };
@@ -77,34 +71,111 @@ const fecthData = async (id: string) => {
     .get(config.API.portfolioId(id))
     .then((res: any) => {
       let data = res.data.result;
-      name.value = data.organization;
-      detail.value = data.reason;
-      files.value = data.docs;
+      name.value = data.name;
+      detail.value = data.detail;
+      fetchFile();
     })
     .catch((e: any) => {
       messageError($q, e);
-    })
-    .finally(() => {
       hideLoader();
     });
 };
 
 /**
- * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
+ * function อัปโหลดไฟล์
+ * @param id ผลงาน
  */
-const fileDocDataUpload = ref<File[]>([]);
-const filesNull = () => {
-  files.value = null;
-};
-//อัปโหลดไฟล์
-const fileUploadDoc = async (file: any) => {
-  fileDocDataUpload.value.push(file);
-  nameFile.value = file[0].name;
-  files.value = file;
-};
+function uploadFiles(id: string) {
+  showLoader();
+  http
+    .post(config.API.file("รายการเอกสาร", "เอกสารผลงาน", id), {
+      replace: true,
+      fileList: [
+        {
+          fileName: files.value.name,
+        },
+      ],
+    })
+    .then(async (res) => {
+      console.log(res);
+      const foundKey: string | undefined = Object.keys(res.data).find(
+        (key) =>
+          res.data[key]?.fileName !== undefined &&
+          res.data[key]?.fileName !== ""
+      );
+      foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
 
-function fileOpen(url: string) {
-  window.open(url, "_blank");
+/**
+ * function บันทึกไฟล์
+ * @param uploadUrl บันทึกไฟล์
+ */
+function uploadFileURL(uploadUrl: string) {
+  const Data = new FormData();
+  Data.append("file", files.value);
+  showLoader();
+  axios
+    .put(uploadUrl, files.value, {
+      headers: {
+        "Content-Type": files.value.type,
+      },
+    })
+    .then(() => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      router.push(`/portfolio`);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      files.value = null;
+    });
+}
+
+/**
+ *function fetch รายการเอกสาร
+ */
+function fetchFile() {
+  showLoader();
+  http
+    .get(config.API.file("รายการเอกสาร", "เอกสารผลงาน", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
+ * @param fileName ชื่อไฟล์
+ */
+function fileOpen(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile("รายการเอกสาร", "เอกสารผลงาน", id.value, fileName)
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
 }
 </script>
 
@@ -189,7 +260,7 @@ function fileOpen(url: string) {
                     </div>
                     <q-separator />
                     <q-list separator>
-                      <q-item v-for="file in files" :key="file.key">
+                      <q-item v-for="file in fileList" :key="file.key">
                         <q-item-section>
                           {{ file.fileName }}
                         </q-item-section>
@@ -199,7 +270,7 @@ function fileOpen(url: string) {
                             round
                             flat
                             icon="mdi-download"
-                            @click="fileOpen(file.pathName)"
+                            @click="fileOpen(file.fileName)"
                           ></q-btn>
                         </q-item-section>
                       </q-item>