diff --git a/src/api/07_insignia/api.insignia.ts b/src/api/07_insignia/api.insignia.ts
index 62e8e4b4e..f125dfe64 100644
--- a/src/api/07_insignia/api.insignia.ts
+++ b/src/api/07_insignia/api.insignia.ts
@@ -37,9 +37,12 @@ export default {
   insigniaDirectorApproved: (roundId: string, ocId: string) => `${insignia}/request/director/approve/${roundId}/${ocId}`,
   insigniaRequestSendNote: (insigniaPeriodId: string) => `${insignia}/request/send/note/${insigniaPeriodId}`,
   
+  // insigniaRequestSendNote: (insigniaPeriodId: string) => `${insignia}/insignia/request/send/note/${insigniaPeriodId}`,
+
   // uploadfile
-  uploadfilereceice: (noteId: string) => `${insignia}/request/import/receice/${noteId}`,
-  uploadfileinvoice: (noteId: string) => `${insignia}/request/import/invoice/${noteId}`,
+  uploadfileInsignia: (type: string, noteId: string) => `${insignia}/request/import/${type}/${noteId}`,
+  previewfileInsignia: (type: string,noteId: string) => `${insignia}/request/preview/${type}/${noteId}`,
+  // uploadfileinvoice: (noteId: string) => `${insignia}/request/import/invoice/${noteId}`,
 
   // จัดสรรเครื่องราช
   insigniaManageType: (insigniaTypeId: string, year: number) => `${insignia}/manage/type/${year}/${insigniaTypeId}`,
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 3bf469189..beb1e5778 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -260,14 +260,13 @@ const fecthlistInsignia = async () => {
     });
 };
 const uploadFile = async (event: any, action: string) => {
-  console.log(selectRound.value);
   if (selectRound.value !== undefined) {
-    let id = selectRound.value.toString();
-    if (action === "result") {
+    let id = selectRound.value;
+    dialogConfirm($q, async () => {
       const formdata = new FormData();
       formdata.append("file", event);
       await http
-        .put(config.API.uploadfilereceice(id), formdata)
+        .put(config.API.uploadfileInsignia(action, id), formdata)
         .then(() => {
           success($q, "อัพโหลดไฟล์สำเร็จ");
         })
@@ -277,26 +276,55 @@ const uploadFile = async (event: any, action: string) => {
         })
         .finally(async () => {
           await fecthlistInsignia();
-          fileResult.value = null;
+          if (action === "receice") {
+            fileResult.value = null;
+          } else if (action === "invoice") {
+            fileinvoice.value = null;
+          }
+
+          modelPerview.value = false;
         });
-    } else if (action === "invoice") {
-      const formdata = new FormData();
-      formdata.append("file", event);
-      await http
-        .put(config.API.uploadfileinvoice(id), formdata)
-        .then(() => {
-          success($q, "อัพโหลดไฟล์สำเร็จ");
-        })
-        .catch((err) => {
-          console.log(err);
-          messageError($q, err);
-        })
-        .finally(async () => {
-          await fecthlistInsignia();
-          fileinvoice.value = null;
-        });
-    }
+    }),
+      "ยืนยันการบันทึกรายการข้อมูล",
+      "ต้องการยืนยันรายการข้อมูลนี้หรื้อไม่ ?";
   }
+  // console.log(selectRound.value);
+
+  //   let id = selectRound.value.toString();
+  //   if (action === "result") {
+  //     const formdata = new FormData();
+  //     formdata.append("file", event);
+  //     await http
+  //       .put(config.API.uploadfilereceice(id), formdata)
+  //       .then(() => {
+  //         success($q, "อัพโหลดไฟล์สำเร็จ");
+  //       })
+  //       .catch((err) => {
+  //         console.log(err);
+  //         messageError($q, err);
+  //       })
+  //       .finally(async () => {
+  //         await fecthlistInsignia();
+  //         fileResult.value = null;
+  //       });
+  //   } else if (action === "invoice") {
+  //     const formdata = new FormData();
+  //     formdata.append("file", event);
+  //     await http
+  //       .put(config.API.uploadfileinvoice(id), formdata)
+  //       .then(() => {
+  //         success($q, "อัพโหลดไฟล์สำเร็จ");
+  //       })
+  //       .catch((err) => {
+  //         console.log(err);
+  //         messageError($q, err);
+  //       })
+  //       .finally(async () => {
+  //         await fecthlistInsignia();
+  //         fileinvoice.value = null;
+  //       });
+  //   }
+  // }
 };
 
 const filterRef = ref<QInput>();
@@ -321,6 +349,51 @@ const editData = (data: any) => {
 const save = () => {
   console.log("save function");
 };
+const modelPerview = ref<boolean>(false);
+const rowspreview = ref<any>([]);
+const typepreview = ref<string>("");
+const fileInsignia = ref<any>(null);
+const perviewfile = async (event: any, actionType: string) => {
+  showLoader();
+  typepreview.value = actionType;
+  fileInsignia.value = event;
+  if (selectRound.value !== undefined) {
+    let id = selectRound.value.toString();
+    const formdata = new FormData();
+    formdata.append("file", event);
+    await http
+      .put(config.API.previewfileInsignia(actionType, id), formdata)
+      .then((res) => {
+        console.log(res);
+        let data = res.data.result;
+        rowspreview.value = data.map((e: any) => ({
+          id: e.id,
+          citizenId: e.citizenId,
+          prefix: e.prefix,
+          position: e.position,
+          status: DataStore.status(e.status),
+          dateReceive: date2Thai(e.dateReceive),
+          name: e.fullName,
+          type: e.requestInsignia,
+          employeeType: DataStore.profileType(e.profileType),
+          profileType: e.profileType,
+          page: e.page,
+          number: e.no,
+          vatnumber: e.number,
+          datepay: date2Thai(e.datePayment),
+          typepay: e.typePayment,
+          address: e.address,
+        }));
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => {
+        modelPerview.value = true;
+        hideLoader();
+      });
+  }
+};
 
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
@@ -407,8 +480,9 @@ const resetFilter = () => {
                 round
                 color="add"
                 icon="mdi-upload"
-                @click="uploadFile(fileResult, 'result')"
+                @click="perviewfile(fileResult, 'receice')"
               >
+                <!-- @click="uploadFile(fileResult, 'result')" -->
                 <q-tooltip
                   >อัพโหลดไฟล์บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์</q-tooltip
                 >
@@ -437,7 +511,7 @@ const resetFilter = () => {
                 round
                 color="add"
                 icon="mdi-upload"
-                @click="uploadFile(fileinvoice, 'invoice')"
+                @click="perviewfile(fileinvoice, 'invoice')"
               >
                 <q-tooltip>อัพโหลดไฟล์บันทึกผลการจ่ายใบกำกับ</q-tooltip>
               </q-btn>
@@ -590,6 +664,57 @@ const resetFilter = () => {
       :profileType="profileType"
     />
   </q-card>
+
+  <q-dialog v-model="modelPerview">
+    <q-card style="width: 850px; max-width: 80vw">
+      <q-card-section>
+        <q-toolbar class="q-py-md">
+          <q-toolbar-title class="header-text">
+            ยืนยันรายการข้อมูล
+          </q-toolbar-title>
+          <q-btn
+            icon="close"
+            unelevated
+            round
+            dense
+            v-close-popup
+            style="color: #ff8080; background-color: #ffdede"
+          />
+        </q-toolbar>
+        <!-- <div class="text-h6">ยืนยันรายการข้อมูล</div> -->
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <d-table
+          :rows="rowspreview"
+          :columns="columns"
+          :visible-columns="visibleColumns"
+          :filter="filter"
+          row-key="name"
+        >
+          <template v-slot:body-cell="props">
+            <q-td :props="props">
+              <div v-if="props.col.name == 'no'">
+                {{ props.rowIndex + 1 }}
+              </div>
+              <div v-else>
+                {{ props.value }}
+              </div>
+            </q-td>
+          </template>
+        </d-table>
+      </q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn
+          unelevated
+          dense
+          color="public"
+          label="บันทึก"
+          @click="uploadFile(fileInsignia, typepreview)"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 <style lang="scss" scoped>
 .arrow {