diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index d368c71..d5b617a 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -3,6 +3,7 @@ import { ref, onMounted, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
+import axios from "axios";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -20,6 +21,12 @@ import TabMain from "@/modules/08_KPI/components/Tab/TabMain.vue";
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogGovernment from "@/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue";
 
+interface ArrayFileList {
+  id: string;
+  pathName: string;
+  fileName: string;
+}
+
 const $q = useQuasar();
 const store = useKpiDataStore();
 const mixin = useCounterMixin();
@@ -30,11 +37,16 @@ const {
   dialogConfirm,
   success,
   findOrgName,
+  dialogRemove,
 } = mixin;
 const route = useRoute();
 const router = useRouter();
 const id = ref<string>(route.params.id as string);
 
+const modalUpload = ref<boolean>(false);
+const fileUpload = ref<any>(null);
+const fileList = ref<ArrayFileList[]>([]);
+
 const modalGovernment = ref<boolean>(false); // ตัวแปร dialog ช่วยราชการ
 const modalEdit = ref<boolean>(false); // ตัวแปร dialog แก้ไขผู้ประเมิน
 const isReadonly = <boolean>(route.name === "KPIEditEvaluator" ? true : false);
@@ -480,7 +492,7 @@ async function downloadReport() {
       const data = res.data.result;
       await genReport(
         data,
-        "แบบรายงานผลการปฏิบัติราชการ " +
+        "แบบกำหนดข้อตกลง" +
           store.dataEvaluation.prefix +
           store.dataEvaluation.firstName +
           " " +
@@ -493,6 +505,138 @@ async function downloadReport() {
     .finally(() => {});
 }
 
+async function uploadReport() {
+  modalUpload.value = true;
+  getData();
+}
+
+function closeDialog() {
+  modalUpload.value = false;
+  fileUpload.value = null;
+}
+
+/** ฟังชั่น อัปโหลดไฟล์ */
+async function clickUpload(file: any) {
+  const fileName = { fileName: file.name };
+
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      const selectedFile = file;
+      const formdata = new FormData();
+      formdata.append("file", selectedFile);
+      await http
+        .post(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value), {
+          replace: true,
+          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, fileUpload.value);
+        })
+        .catch((err) => {
+          messageError($q, err);
+        });
+    },
+    "ยืนยันการอัปโหลดไฟล์",
+    "ต้องการยืนยันการอัปโหลดไฟล์นี้หรือไม่ ?"
+  );
+}
+
+/**
+ * อัปโหลดไฟล์
+ * @param uploadUrl  url
+ * @param file ไฟล์
+ */
+async function uploadFileDoc(uploadUrl: string, file: any) {
+  const Data = new FormData();
+  Data.append("file", fileUpload.value);
+  await axios
+    .put(uploadUrl, file, {
+      headers: {
+        "Content-Type": file.type,
+      },
+    })
+    .then(async (res) => {
+      await getData();
+      success($q, "อัปโหลดไฟล์สำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      fileUpload.value = null;
+      hideLoader();
+    });
+}
+
+/** ดึงข้อมูล */
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ลบไฟล์
+ * @param fileName file name
+ */
+function deleteFile(fileName: string) {
+  dialogRemove($q, async () => {
+    showLoader();
+    http
+      .delete(
+        config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`
+      )
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await getData();
+
+        setTimeout(() => {
+          success($q, `ลบไฟล์สำเร็จ`);
+          hideLoader();
+        }, 500);
+      });
+  });
+}
+
+/**
+ * ดาวน์โหลดลิงก์ไฟล์
+ * @param fileName file name
+ */
+function downloadFile(fileName: string) {
+  showLoader();
+  http
+    .get(config.API.file("แบบกำหนดข้อตกลง", "KPI", id.value) + `/${fileName}`)
+    .then((res) => {
+      const data = res.data.downloadUrl;
+      window.open(data, "_blank");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      hideLoader();
+    });
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = false;
@@ -730,11 +874,11 @@ onMounted(async () => {
                     </q-btn>
                     <q-btn
                       v-if="
-                        store.dataEvaluation.evaluationStatus !== 'NEW' ||
+                        store.dataEvaluation.evaluationStatus !== 'NEW' &&
                         store.dataEvaluation.evaluationStatus !==
-                          'NEW_EVALUATOR' ||
+                          'NEW_EVALUATOR' &&
                         store.dataEvaluation.evaluationStatus !==
-                          'NEW_COMMANDER' ||
+                          'NEW_COMMANDER' &&
                         store.dataEvaluation.evaluationStatus !==
                           'NEW_COMMANDER_HIGH'
                       "
@@ -750,6 +894,28 @@ onMounted(async () => {
                         >ดาวน์โหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
                       >
                     </q-btn>
+                    <q-btn
+                      v-if="
+                        store.dataEvaluation.evaluationStatus !== 'NEW' &&
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_EVALUATOR' &&
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_COMMANDER' &&
+                        store.dataEvaluation.evaluationStatus !==
+                          'NEW_COMMANDER_HIGH'
+                      "
+                      unelevated
+                      round
+                      color="grey-2"
+                      text-color="blue"
+                      icon="upload"
+                      size="md"
+                      @click="uploadReport()"
+                    >
+                      <q-tooltip
+                        >อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ</q-tooltip
+                      >
+                    </q-btn>
                   </div>
                 </div>
               </div>
@@ -1079,6 +1245,94 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <q-dialog v-model="modalUpload" persistent>
+    <q-card class="col-12" style="width: 60vw">
+      <DialogHeader
+        tittle="อัปโหลดแบบกำหนดข้อตกลงการประเมินผลสัมฤทธิ์ของงานและพฤติกรรมการปฏิบัติราชการ"
+        :close="closeDialog"
+      />
+      <q-separator />
+
+      <q-card-section>
+        <div class="row col-12 q-col-gutter-y-sm">
+          <div class="col-12 row" v-if="fileList.length == 0">
+            <q-file
+              for="inputFiles"
+              class="col-12"
+              outlined
+              dense
+              v-model="fileUpload"
+              label="ไฟล์เอกสารแบบกำหนดข้อตกลง"
+              hide-bottom-space
+              accept=".pdf"
+              clearable
+            >
+              <template v-slot:prepend>
+                <q-icon name="attach_file" color="primary" />
+              </template>
+              <template v-slot:after>
+                <q-btn
+                  size="14px"
+                  v-if="fileUpload"
+                  flat
+                  round
+                  dense
+                  color="primary"
+                  icon="mdi-upload"
+                  @click="clickUpload(fileUpload)"
+                  ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
+                >
+              </template>
+            </q-file>
+          </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-section>
+    </q-card>
+  </q-dialog>
+
   <DialogGovernment v-model:modal="modalGovernment" />
 </template>
 <style>