api upload

src/api/exam/api.candidate.ts

@@ -13,6 +13,8 @@ export default {
   candidateRegister: (examId: string) => `${candidate}register/${examId}`,
   candidatePayment: (examId: string) => `${candidate}payment/${examId}`,
   candidateStatus: (examId: string) => `${candidate}status/${examId}`,
+  candidateUpload: (examId: string) => `${candidate}upload/${examId}`,
+  candidateDownload: (examId: string) => `${candidate}download/${examId}`,
   periodExamId: (examId: string) => `${periodExam}${examId}`,
   candidateId: (examId: string) => `${candidate}${examId}`,
   candidate

src/modules/01_exam/components/Form/Document.vue

@@ -2,7 +2,11 @@
 <template>
   <HeaderTop
     v-model:edit="edit"
-    :header="$q.screen.gt.xs ? 'อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)':'อัปโหลดเอกสาร'"
+    :header="
+      $q.screen.gt.xs
+        ? 'อัปโหลดเอกสาร(เช่น สำเนาบัตรประชาชน ทะเบียนบ้าน วุฒิการศึกษา)'
+        : 'อัปโหลดเอกสาร'
+    "
     icon="mdi-file-document"
     :addData="true"
     :editOnly="true"
@@ -26,32 +30,109 @@
       color="gray"
       type="file"
       flat
-      auto-upload
       :factory="fileUpload"
+      ref="uploader"
       class="full-width"
       text-color="dark"
       :max-size="10000000"
       accept=".jpg,.png,.pdf,.csv,.doc"
       bordered
       label="[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]"
-    />
+      @added="fileAdd"
+    >
+      <template v-slot:header="scope">
+        <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
+          <q-btn
+            v-if="scope.queuedFiles.length > 0"
+            icon="clear_all"
+            @click="scope.removeQueuedFiles"
+            round
+            dense
+            flat
+          >
+            <q-tooltip>ลบทั้งหมด</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="scope.uploadedFiles.length > 0"
+            icon="done_all"
+            @click="scope.removeUploadedFiles"
+            round
+            dense
+            flat
+          >
+            <q-tooltip>ลบไฟล์ที่อัปโหลด</q-tooltip>
+          </q-btn>
+          <q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
+          <div class="col">
+            <div class="q-uploader__title">{{ '[ไฟล์ jpg,png,pdf,csv,doc ขนาดไม่เกิน 10MB]' }}</div>
+            <div class="q-uploader__subtitle">
+              {{ scope.uploadSizeLabel }} / {{ scope.uploadProgressLabel }}
+            </div>
+          </div>
+          <q-btn
+            v-if="scope.canAddFiles"
+            type="a"
+            icon="add_box"
+            @click="scope.pickFiles"
+            round
+            dense
+            flat
+          >
+            <q-uploader-add-trigger />
+            <q-tooltip>เลือกไฟล์</q-tooltip>
+          </q-btn>
+          <q-btn
+            v-if="scope.canUpload"
+            icon="cloud_upload"
+            label="อัพโหลดไฟล์"
+            @click="scope.upload"
+            round
+            dense
+            flat
+          >
+            <q-tooltip>อัพโหลดไฟล์</q-tooltip>
+          </q-btn>
+
+          <q-btn v-if="scope.isUploading" icon="clear" @click="scope.abort" round dense flat>
+            <q-tooltip>ยกเลิกการอัปโหลด</q-tooltip>
+          </q-btn>
+        </div>
+      </template>
+    </q-uploader>
   </div>
   <q-card bordered flat class="full-width q-my-md">
     <q-list separator>
-      <q-item v-for="file in files" :key="file.key" class="q-my-xs">
+      <q-item v-for="file in files" :key="file.id" class="q-my-xs">
         <q-item-section>
           <q-item-label class="full-width ellipsis">
-            {{ file.name }}
+            {{ file.fileName }}
           </q-item-label>
 
-          <q-item-label caption> สถานะ: {{ file.status }} / {{ file.sizeLabel }} </q-item-label>
+          <q-item-label caption> สถานะ: {{ file.fileType }} / {{ file.fileSize }} </q-item-label>
         </q-item-section>
         <q-item-section top side>
           <div class="q-gutter-sm">
-            <q-btn size="12px" flat dense round color="blue" icon="mdi-download-outline">
+            <q-btn
+              size="12px"
+              flat
+              dense
+              round
+              color="blue"
+              icon="mdi-download-outline"
+              @click="downloadData(file.id)"
+            >
               <q-tooltip>ดาวน์โหลด</q-tooltip>
             </q-btn>
-            <q-btn size="12px" flat dense round color="red" icon="mdi-delete-outline" v-if="edit">
+            <q-btn
+              size="12px"
+              flat
+              dense
+              round
+              color="red"
+              icon="mdi-delete-outline"
+              v-if="edit"
+              @click="deleteData(file.id)"
+            >
               <q-tooltip>ลบไฟล์</q-tooltip>
             </q-btn>
           </div>
@@ -63,6 +144,10 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 import HeaderTop from '@/components/top.vue'
+import http from '@/plugins/http'
+import config from '@/app.config'
+import { useRoute } from 'vue-router'
+import type { uploadType } from '@/modules/01_exam/interface/index/Main'
 
 const props = defineProps({
   status: {
@@ -70,32 +155,113 @@ const props = defineProps({
     required: true
   }
 })
+const route = useRoute()
+const examId = ref<string>(route.params.id.toString())
 
+const uploader = ref<any>()
+const loader = ref<boolean>(false)
 const edit = ref<boolean>(props.status == 'register' || props.status == 'rejectRegister')
 const name = ref<string>('')
-const files = ref<any>([
-  {
-    key: 1,
-    name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
-    status: 'อัปโหลดเสร็จสิ้น',
-    sizeLabel: '176MB'
-  },
-  {
-    key: 2,
-    name: 'เอกสารข้อมูลการสมรส',
-    status: 'อัปโหลดเสร็จสิ้น',
-    sizeLabel: '89MB'
-  }
+const fileDataUpload = ref<File>()
+const files = ref<uploadType[]>([
+  //   {
+  //     key: 1,
+  //     name: 'เอกสารข้อมูลการเปลี่ยนชื่อ',
+  //     status: 'อัปโหลดเสร็จสิ้น',
+  //     sizeLabel: '176MB'
+  //   },
+  //   {
+  //     key: 2,
+  //     name: 'เอกสารข้อมูลการสมรส',
+  //     status: 'อัปโหลดเสร็จสิ้น',
+  //     sizeLabel: '89MB'
+  //   }
 ])
 const emit = defineEmits(['update:loader'])
 
-onMounted(async () => {})
+onMounted(async () => {
+  await getData()
+})
+
+const fileAdd = async (file: any) => {
+  name.value = file[0].name
+}
 
 const fileUpload = async (file: any) => {
-  name.value = file[0].name
-  return {
-    url: 'http://localhost:4444/upload',
-    method: 'POST'
+  //   fileDataUpload.value = file[0]
+  const blob = file.slice(0, file.size, file[0].type)
+  const newFile = new File([blob], name.value, { type: file[0].type })
+  fileDataUpload.value = newFile
+  await uploadData()
+}
+
+const getData = async () => {
+  loader.value = true
+  await http
+    .get(config.API.candidateUpload(examId.value))
+    .then((res) => {
+      const data = res.data.result
+      //   console.log(data)
+      files.value = data
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
+}
+
+const deleteData = async (id: string) => {
+  loader.value = true
+  const params = {
+    documentId: id
   }
+  await http
+    .delete(config.API.candidateUpload(examId.value), {
+      params
+    })
+    .then((res) => {
+      const data = res.data.result
+      console.log(data)
+    })
+    .catch(() => {})
+    .finally(async () => {
+      loader.value = false
+      await getData()
+    })
+}
+
+const uploadData = async () => {
+  loader.value = true
+  const formData = new FormData()
+  formData.append('FileData', fileDataUpload.value)
+  await http
+    .put(config.API.candidateUpload(examId.value), formData)
+    .then((res) => {
+      const data = res.data.result
+      console.log(data)
+    })
+    .catch(() => {})
+    .finally(async () => {
+      loader.value = false
+      name.value = ''
+      setTimeout(() => {
+        uploader.value.reset()
+      }, 100)
+      await getData()
+    })
+}
+
+const downloadData = async (id: string) => {
+  loader.value = true
+  await http
+    .get(config.API.candidateDownload(id))
+    .then((res) => {
+      const data = res
+      console.log(data)
+    })
+    .catch(() => {})
+    .finally(() => {
+      loader.value = false
+    })
 }
 </script>

src/modules/01_exam/interface/index/Main.ts

@@ -99,6 +99,13 @@ interface zipCodeOption {
   zipCode: string | null
 }
 
+interface uploadType {
+  id: String
+  fileName: String
+  fileSize: number
+  fileType: String
+}
+
 interface ExamCard {
   id: string
   title: string
@@ -300,5 +307,6 @@ export type {
   Address,
   zipCodeOption,
   Occupation,
-  ExamCard
+  ExamCard,
+  uploadType
 }