ประวัติส่วนตัว: อัพโหลดรูปโปรไฟล์

src/modules/04_registryNew/views/detailView.vue

@@ -1,15 +1,29 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
+import axios from "axios";
 import { useRoute, useRouter } from "vue-router";
+import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { useQuasar } from "quasar";
 import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
 import type { DataPerson } from "@/modules/04_registryNew/interface/response/Main";
-
+import avatar from "@/assets/avatar_user.jpg";
 import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
+import UploadFile from "@/modules/11_discipline/components/UploadFile.vue";
+const mixin = useCounterMixin();
+const $q = useQuasar();
 const router = useRouter();
 const route = useRoute();
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 
 const profileId = ref<string>(route.params.id.toString());
 const formDetail = ref<DataPerson>();
@@ -39,14 +53,89 @@ const itemsMenu = ref<DataOption[]>([
     name: "อื่นๆ",
   },
 ]);
+
+const uploadUrl = ref<string>("");
+// const testFile = ref<File | null>(null);
+const fileName = ref<string>("");
+const profilePicture = ref<string>("");
+const profileFile = ref();
 const input = document.createElement("input");
 input.type = "file";
 input.accept = ".jpg,.png,.tif,.pic";
 
+input.addEventListener("change", (e) => {
+  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
+  uploadProfile();
+});
+
 function selectFile() {
   input.click();
 }
 
+// watch(
+//   () => testFile.value,
+//   () => uploadProfile()
+// );
+
+async function uploadProfile() {
+  await http
+    .post(config.API.file("ทะเบียนประวัติ", "โปรไฟล์", profileId.value), {
+      replace: true,
+      fileList: [
+        {
+          fileName: fileName.value,
+        },
+      ],
+    })
+    .then(async (res) => {
+      uploadUrl.value = res.data[fileName.value].uploadUrl;
+      uploadFileURL(uploadUrl.value, profileFile.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function uploadFileURL(uploadUrl: string, file: any) {
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(() => {
+      fetchProfile(profileId.value);
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchProfile(id: string) {
+  showLoader();
+  await http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, fileName.value))
+    .then(async (res) => {
+      console.log(res.data);
+      profilePicture.value = res.data.downloadUrl;
+    })
+    .catch((err) => {
+      profilePicture.value = avatar;
+      console.log(profilePicture.value);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 function fetchDataPersonal() {
   const data = {
     id: "1526d9d3-d8b1-43ab-81b5-a84dfbe99201",
@@ -69,7 +158,9 @@ function onClickDownloadKp7(type: string) {
     window.open(config.API.profileKp7ShortId(profileId.value));
   }
 }
-onMounted(() => {
+onMounted(async () => {
+  fileName.value = `profile-${profileId.value}`;
+  fetchProfile(profileId.value);
   fetchDataPersonal();
 });
 </script>
@@ -147,7 +238,7 @@ onMounted(() => {
 
       <div class="absolute-center-left q-ml-lg">
         <q-avatar size="130px">
-          <img src="@/assets/avatar_user.jpg" />
+          <img :src="profilePicture" />
         </q-avatar>
         <q-btn
           round