diff --git a/Services/client/src/components/FileItem.vue b/Services/client/src/components/FileItem.vue
index e06fdfb..445e92b 100644
--- a/Services/client/src/components/FileItem.vue
+++ b/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()
         }
       "
     />
diff --git a/Services/client/src/stores/tree-data.ts b/Services/client/src/stores/tree-data.ts
index 91ad03d..a9dcf72 100644
--- a/Services/client/src/stores/tree-data.ts
+++ b/Services/client/src/stores/tree-data.ts
@@ -238,15 +238,56 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     await getFolder(pathname.join('/') + '/')
   }
 
+  async function uploadFile(
+    pathname: string,
+    file: File,
+    metadata: {
+      title: string
+      description: string
+      keyword: string[]
+      category: string[]
+    }
+  ) {
+    loader.show()
+
+    const pathArray: string[] = pathname.split('/').filter(Boolean)
+
+    if (pathArray.length <= 2) return
+
+    let requestPath = 'cabinet'
+    if (pathArray.length >= 1) requestPath += `/${pathArray[0]}`
+    if (pathArray.length >= 2) requestPath += `/drawer/${pathArray[1]}`
+    if (pathArray.length >= 3) requestPath += `/folder/${pathArray[2]}`
+    if (pathArray.length >= 4) requestPath += `/subfolder/${pathArray[3]}`
+    requestPath += '/file'
+
+    const formData = new FormData()
+
+    formData.append('file', file)
+    formData.append('title', metadata.title)
+    formData.append('description', metadata.description)
+    formData.append('keyword', metadata.keyword.join(','))
+    formData.append('category', metadata.category.join(','))
+
+    await axiosClient.post(`${apiEndpoint}${requestPath}`, formData)
+
+    if (currentDept.value === 0) await getCabinet()
+    else await getFolder(currentPath.value)
+
+    return loader.hide()
+  }
+
   return {
     data,
     currentFolder,
     currentFile,
     currentDept,
-    listDataFolder,
+    currentPath,
     listDataFile,
+    listDataFolder,
     getCabinet,
     getFolder,
+    uploadFile,
     gotoParent,
     createFolder,
     deleteFolder,