feat: upload done.

src/components/File/UploadModal.vue

@@ -4,29 +4,30 @@
       <div class="py-5">
       </div>
     </template>
-    <div class=" h-full flex flex-col justify-center items-center p-4 space-y-4">
-      <IconUploarding class="loader-arrow-upward"></IconUploarding>
-      <p class="text-neutral-900">Click or drag a file here.</p>
-      <p class="text-neutral-500">(Only <span class="text-primary">.csv</span> is supported)</p>
-      <router-link class="btn btn-lg btn-c-primary" :to="{name: 'Upload', replace: true}">下一頁，路徑不添進歷史紀錄</router-link>
-      <p class="btn btn-lg btn-c-primary" @click="uploadFailde">上傳失敗 Modal</p>
-      <p class="btn btn-lg btn-c-primary" @click="uploadSuccess">上傳成功 Modal</p>
-      <p class="btn btn-lg btn-c-primary" @click="uploadConfirm">是否上傳 Modal</p>
-      <label class="btn btn-sm btn-neutral cursor-pointer">
-        hidden
-        <input id="uploadFiles" class="" type="file" @change="upload($event)">
-        Upload
-      </label>
-    </div>
+    <label for="uploadFiles">
+    <div class=" h-full flex flex-col justify-center items-center p-4 space-y-4 relative">
+      <input id="uploadFiles" class=" absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer" type="file" accept="text/csv" @change="upload($event)">
+        <IconUploarding class="loader-arrow-upward"></IconUploarding>
+        <p class="text-neutral-900">Click or drag a file here.</p>
+        <p class="text-neutral-500">(Only <span class="text-primary">.csv</span> is supported)</p>
+      </div>
+    </label>
   </Dialog>
 </template>
 <script>
-import files from '../../stores/files';
 import IconUploarding from '../icons/IconUploarding.vue';
-import { uploadFailde, uploadSuccess, uploadConfirm } from '@/module/alertModal.js'
+import { uploadFailed } from '@/module/alertModal.js'
+import { storeToRefs } from 'pinia';
+import FilesStore from '@/stores/files.js';
 
 export default {
   props: ['uploadModal'],
+  setup() {
+    const filesStore = FilesStore();
+    const { uploadFileName } = storeToRefs(filesStore);
+
+    return { filesStore, uploadFileName }
+  },
   data() {
     return {
       contentClass: 'h-full',
@@ -36,27 +37,28 @@ export default {
     IconUploarding,
   },
   methods: {
-    uploadFailde,
-    uploadSuccess,
-    uploadConfirm,
-    upload(event) {
-      const target = event.target
-      console.log(target.files);
-      let file;
-      let form;
+    async upload(event) {
+      const fileInput = document.getElementById('uploadFiles');
+      const target = event.target;
+      const formData = new FormData();
+      let uploadFile;
 
-      if(target && target.files) files.value = target.files[0];
-      if(file.value) {
-        try {
-
-        } catch(error) {
-          console.log('error', error);
-          form.value?.reset();
-          file.value = null;
-        }
-      }
+      // 判斷是否有檔案
+      if(target && target.files) uploadFile = target.files[0];
+      // 判斷檔案大小不可超過 90MB (90(MB)*1024(KB)*1024(Bytes)=94,371,840)
+      if(uploadFile.size >= 94371840) return uploadFailed('size')
+      // 將檔案加進 formData，欄位一定要「csv」
+      formData.append('csv', uploadFile);
+      // 呼叫第一階段上傳 API
+      if(uploadFile) await this.filesStore.upload(formData);
+      this.uploadFileName = (uploadFile.name).match(/(.*)\.csv/)[1];
+      // 清除選擇文件
+      if(fileInput) fileInput.value = '';
     }
   },
+  beforeUnmount() {
+    this.$emit('closeModal', false);
+  }
 }
 </script>
 <style scoped>