refactor: upload file

Services/client/src/components/FileItem.vue

@@ -2,6 +2,7 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 
+import FileIcon from '@/components/FileIcon.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
 import FromEdit from '@/components/FromEdit.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
@@ -11,10 +12,10 @@ const { isPreview } = storeToRefs(useFileInfoStore())
 const { getFileInfo } = useFileInfoStore()
 const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
 
-const { currentFolder, currentFile, currentDept } = storeToRefs(
+const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
   useTreeDataStore()
 )
-const { getFolder, createFolder, editFolder } = useTreeDataStore()
+const { getFolder, createFolder, editFolder, uploadFile } = useTreeDataStore()
 
 const drawer = ref<boolean>(false)
 const drawerFile = ref<boolean>(false)
@@ -45,6 +46,17 @@ const props = withDefaults(
     action: false,
   }
 )
+
+async function handleSubmit() {
+  if (!inputFile.value) return
+
+  await uploadFile(currentPath.value, inputFile.value, {
+    title: fileTitle.value,
+    description: fileDesc.value,
+    keyword: [fileKeyword.value],
+    category: [fileCategory.value],
+  })
+}
 </script>
 
 <template>
@@ -139,7 +151,11 @@ const props = withDefaults(
             "
           >
             <q-card-section class="column justify-center relative q-px-xl">
-              <q-icon name="description" size="6em" color="primary" />
+              <file-icon
+                size="preview"
+                :fileMimeType="value.fileType"
+                ref="fileIconComp"
+              />
               <div
                 class="absolute"
                 style="top: 0.5rem; right: 0.5rem"
@@ -214,14 +230,17 @@ const props = withDefaults(
       />
     </q-toolbar>
     <span class="text-weight-bold">อัพโหลดไฟล์</span>
-    <q-input
-      model-value="inputfile"
+    <q-file
+      v-model="inputFile"
       class="q-my-md"
-      outlined
-      type="file"
-      :placeholder="`กรอกชื่อ${DEPT_NAME[currentDept]}`"
+      label="Pick files"
       dense
-    />
+      outlined
+    >
+      <template v-slot:prepend>
+        <q-icon name="attach_file" />
+      </template>
+    </q-file>
     <span class="text-weight-bold">ชื่อเรื่อง</span>
     <q-input
       class="q-my-md"
@@ -265,6 +284,7 @@ const props = withDefaults(
       @click="
         () => {
           drawerFile = !drawerFile
+          handleSubmit()
         }
       "
     />