diff --git a/src/modules/05_placement/components/PersonalDetail/Information/Document.vue b/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
index 26f5b1756..7c6151a85 100644
--- a/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
+++ b/src/modules/05_placement/components/PersonalDetail/Information/Document.vue
@@ -1,3 +1,312 @@
+<script setup lang="ts">
+import { onMounted, computed, ref, watch } from "vue";
+import { useQuasar, QForm } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import axios from "axios";
+
+import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+interface ArrayFileList {
+    id:string
+    pathName:string
+    fileName:string
+}
+
+const props = defineProps({
+  statusEdit: {
+    type: Boolean,
+    required: true,
+  },
+  notiNoEdit: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  fetch: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  datainformation: {
+    type: Array,
+  },
+});
+const emit = defineEmits(["update:statusEdit"]);
+
+const documentFile = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
+const $q = useQuasar(); // show dialog
+const mixin = useCounterMixin();
+const route = useRoute();
+const { success, messageError, showLoader, dialogConfirm, hideLoader,dialogRemove } = mixin;
+const profileId = ref<string>(
+  route.params.personalId ? route.params.personalId.toString() : ""
+);
+const edit = ref<boolean>(false);
+const uploader = ref<any>();
+const files = ref<any>([]);
+const file = ref<any>([]);
+const name = ref<string>("");
+const dataMain = ref<any>([]);
+
+
+
+// const getData = async () => {
+//   if (props.datainformation) {
+//     dataMain.value = props.datainformation;
+//     files.value = dataMain.value.docs;
+//   }
+
+  // โค้ดเก่ายังไม่ได้ใช้
+    // if (profileId.value) {
+    //   showLoader();
+    //   await http
+    //     .get(config.API.profilePaperId(profileId.value))
+    //     .then((res) => {
+    //       const data = res.data.result;
+    //       files.value = data;
+    //     })
+    //     .catch((e) => {
+    //       messageError($q, e);
+    //     })
+    //     .finally(() => {
+    //       hideLoader();
+    //     });
+    // }
+// };
+
+const deleteData = async (id: string) => {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .delete(config.API.documentDelid(profileId.value, id))
+        .then(() => {
+          success($q, "ลบไฟล์เอกสารสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await props.fetch();
+        });
+    },
+    "ยืนยันการลบเอกสารหลักฐาน",
+    "ต้องการยืนยันการลบเอกสารหลักฐานนี้หรือไม่ ?"
+  );
+};
+
+const uploadData = async () => {
+  if (profileId.value) {
+    if (file.value.length > 0) {
+      const blob = file.value.slice(0, file.value[0].size);
+      const newFile = new File(blob, name.value, {
+        type: file.value[0].type,
+      });
+      const formData = new FormData();
+      formData.append("file", newFile);
+      // formData.append("moss", "newFile");
+      showLoader();
+      await http
+        .put(config.API.documentByid(profileId.value), formData)
+        .then(() => {
+          success($q, "บันทึกข้อมูลสำเร็จ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          await props.fetch();
+          uploader.value.reset();
+          name.value = "";
+          edit.value = false;
+          emit("update:statusEdit", false);
+        });
+      // } else {
+      //   // modalError(
+      //   //   $q,
+      //   //   "ไม่สามารถอัปโหลดไฟล์ได้",
+      //   //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
+      //   // );
+      //   getData();
+    }
+  }
+};
+
+const fileAdd = async (val: any) => {
+  name.value = val[0].name;
+  file.value = val;
+};
+
+const downloadData = async (path: string) => {
+  window.open(path);
+};
+
+const changeBtn = async () => {
+  name.value = "";
+  if (edit.value == true) {
+    if (props.statusEdit === true) {
+      edit.value = false;
+      props.notiNoEdit();
+    } else {
+      emit("update:statusEdit", true);
+    }
+  } else {
+    emit("update:statusEdit", false);
+  }
+};
+
+/** ฟังชั่นใหม่ */
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(
+          config.API.file(
+            "ระบบบรรจุ แต่งตั้ง",
+            "เอกสารหลักฐาน",
+            profileId.value
+          ),
+          {
+            replace: false,
+            fileList: fileName,
+          }
+        )
+        .then(async (res) => {
+          const foundKey: string | undefined = Object.keys(res.data).find(
+            (key) =>
+              res.data[key]?.fileName !== undefined &&
+              res.data[key]?.fileName !== ""
+          );
+          foundKey &&
+            uploadFileDoc(res.data[foundKey]?.uploadUrl, documentFile.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * ฟังก์ชั่นสำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", documentFile.value);
+  showLoader();
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then((res) => {
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+      getData();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      documentFile.value = null;
+    });
+}
+
+/**
+ * ดาวน์โหลดลิงค์ไฟล์
+ * @param fileName file name
+ */
+ function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(
+      config.API.fileByFile(
+        "ระบบบรรจุ แต่งตั้ง",
+        "เอกสารหลักฐาน",
+        profileId.value,
+        fileName
+      )
+    )
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(
+        config.API.fileByFile(
+          "ระบบบรรจุ แต่งตั้ง",
+          "เอกสารหลักฐาน",
+          profileId.value,
+          fileName
+        )
+      )
+      .then((res) => {
+
+        setTimeout(() => {
+          getData();
+          success($q, `ลบไฟล์สำเร็จ`);
+          hideLoader();
+        }, 1000);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+async function getData() {
+  showLoader()
+  await http
+    .get(
+      config.API.file("ระบบบรรจุ แต่งตั้ง", "เอกสารหลักฐาน", profileId.value)
+    )
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader()
+    });
+}
+
+onMounted(async () => {
+  await getData();
+});
+
+</script>
 <template>
   <q-card flat bordered class="col-12 row q-px-lg q-py-md">
     <HeaderTop
@@ -9,7 +318,87 @@
       :disable="statusEdit"
       :save="uploadData"
     />
-    <div class="row col-12 q-pt-sm">
+    <q-card  class="row col-12">
+
+      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+        <div class="col-12 row">
+          <q-file
+            for="inputFiles"
+            class="col-12"
+            outlined
+            dense
+            v-model="documentFile"
+            label="ไฟล์เอกสารหลักฐาน"
+            hide-bottom-space
+            accept=".pdf,.xlsx,.docx,.png,.jpg"
+            clearable
+          >
+            <template v-slot:prepend>
+              <q-icon name="attach_file" color="primary" />
+            </template>
+            <template v-slot:after>
+              <q-btn
+                size="14px"
+                v-if="documentFile"
+                flat
+                round
+                dense
+                color="add"
+                icon="mdi-upload"
+                @click="clickUpload(documentFile)"
+                ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+              >
+            </template>
+          </q-file>
+
+          <!-- <div class="col-1 self-center" v-if="formData.documentFile"></div> -->
+        </div>
+
+        <div v-if="fileList.length > 0" class="col-xs-12 row">
+          <q-list class="full-width rounded-borders" bordered separator>
+            <q-item
+              clickable
+              v-ripple
+              v-for="data in fileList"
+              :key="data.id"
+              class="items-center"
+            >
+              <q-item-section>{{ data.fileName }}</q-item-section>
+              <q-space />
+              <div>
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="blue"
+                  icon="mdi-download"
+                  @click="downloadFile(data.fileName)"
+                  ><q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
+                >
+                <q-btn
+                  size="12px"
+                  flat
+                  round
+                  dense
+                  color="red"
+                  class="q-ml-sm"
+                  icon="mdi-delete-outline"
+                  @click="deleteFile(data.fileName)"
+                  ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
+                >
+              </div>
+            </q-item>
+          </q-list>
+        </div>
+
+        <div class="col-12" v-else>
+          <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
+        </div>
+      </div>
+    </q-card>
+    <!-- โค้ดเก่า -->
+    <!-- <div class="row col-12 q-pt-sm">
       <q-card bordered flat class="full-width">
         <q-list separator>
           <q-item v-for="file in files" :key="file.key" class="q-my-xs">
@@ -133,157 +522,6 @@
           </div>
         </template>
       </q-uploader>
-    </div>
+    </div> -->
   </q-card>
 </template>
-<script setup lang="ts">
-import { onMounted, computed, ref, watch } from "vue";
-import { useQuasar, QForm } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-
-import HeaderTop from "@/modules/04_registry/components/Information/top.vue";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-const props = defineProps({
-  statusEdit: {
-    type: Boolean,
-    required: true,
-  },
-  notiNoEdit: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  fetch: {
-    type: Function,
-    default: () => console.log("not function"),
-  },
-  datainformation: {
-    type: Array,
-  },
-});
-const emit = defineEmits(["update:statusEdit"]);
-
-const $q = useQuasar(); // show dialog
-const mixin = useCounterMixin();
-const route = useRoute();
-const { success, messageError, showLoader, dialogConfirm } = mixin;
-const profileId = ref<string>(
-  route.params.personalId ? route.params.personalId.toString() : ""
-);
-const edit = ref<boolean>(false);
-const uploader = ref<any>();
-const files = ref<any>([]);
-const file = ref<any>([]);
-const name = ref<string>("");
-const dataMain = ref<any>([]);
-
-onMounted(async () => {
-  await getData();
-});
-
-const getData = async () => {
-  if (props.datainformation) {
-    dataMain.value = props.datainformation;
-    files.value = dataMain.value.docs;
-  }
-  //   if (profileId.value) {
-  //     showLoader();
-  //     await http
-  //       .get(config.API.profilePaperId(profileId.value))
-  //       .then((res) => {
-  //         const data = res.data.result;
-  //         files.value = data;
-  //       })
-  //       .catch((e) => {
-  //         messageError($q, e);
-  //       })
-  //       .finally(() => {
-  //         hideLoader();
-  //       });
-  //   }
-};
-
-const deleteData = async (id: string) => {
-  dialogConfirm(
-    $q,
-    async () => {
-      showLoader();
-      await http
-        .delete(config.API.documentDelid(profileId.value, id))
-        .then(() => {
-          success($q, "ลบไฟล์เอกสารสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await props.fetch();
-        });
-    },
-    "ยืนยันการลบเอกสารหลักฐาน",
-    "ต้องการยืนยันการลบเอกสารหลักฐานนี้หรือไม่ ?"
-  );
-};
-
-const uploadData = async () => {
-  if (profileId.value) {
-    if (file.value.length > 0) {
-      const blob = file.value.slice(0, file.value[0].size);
-      const newFile = new File(blob, name.value, {
-        type: file.value[0].type,
-      });
-      const formData = new FormData();
-      formData.append("file", newFile);
-      // formData.append("moss", "newFile");
-      showLoader();
-      await http
-        .put(config.API.documentByid(profileId.value), formData)
-        .then(() => {
-          success($q, "บันทึกข้อมูลสำเร็จ");
-        })
-        .catch((e) => {
-          messageError($q, e);
-        })
-        .finally(async () => {
-          await props.fetch();
-          uploader.value.reset();
-          name.value = "";
-          edit.value = false;
-          emit("update:statusEdit", false);
-        });
-      // } else {
-      //   // modalError(
-      //   //   $q,
-      //   //   "ไม่สามารถอัปโหลดไฟล์ได้",
-      //   //   "กรุณาเลือกไฟล์ที่ต้องการอัปโหลด"
-      //   // );
-      //   getData();
-    }
-  }
-};
-
-const fileAdd = async (val: any) => {
-  name.value = val[0].name;
-  file.value = val;
-};
-
-const downloadData = async (path: string) => {
-  window.open(path);
-};
-
-const changeBtn = async () => {
-  name.value = "";
-  if (edit.value == true) {
-    if (props.statusEdit === true) {
-      edit.value = false;
-      props.notiNoEdit();
-    } else {
-      emit("update:statusEdit", true);
-    }
-  } else {
-    emit("update:statusEdit", false);
-  }
-};
-</script>