feat: upload, edit & delete file, folder

Services/client/src/components/DialogDelete.vue

@@ -1,27 +1,14 @@
 <script setup lang="ts">
-import { useTreeDataStore } from '@/stores/tree-data'
+defineEmits(['confirm', 'cancel'])
-
-const { deleteFolder } = useTreeDataStore()
-const emit = defineEmits(['update:confirmDelete'])
-const props = withDefaults(
-  defineProps<{ confirmDelete: boolean; pathname: string }>(),
-  {
-    confirmDelete: false,
-  }
-)
 </script>
 
 <template>
-  <q-dialog
+  <q-dialog persistent transition-show="scale" transition-hide="scale">
-    v-model="props.confirmDelete"
-    persistent
-    transition-show="scale"
-    transition-hide="scale"
-  >
     <q-card style="width: 400px">
       <q-card-section>
-        
+        <span class="text-h6">
-        <div class="text-h6"><q-icon name="error" color="negative" size="2.5rem"/>แจ้งเตือนการลบ</div>
+          <q-icon name="error" color="negative" size="2.5rem" />แจ้งเตือนการลบ
+        </span>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
@@ -31,58 +18,20 @@ const props = withDefaults(
       <q-card-actions align="right" class="bg-white text-primary">
         <q-space />
         <q-btn
-          flat
           label="ยกเลิก"
+          flat
           v-close-popup
-          @click="
+          @click="() => $emit('cancel')"
-            () => {
-              emit('update:confirmDelete')
-            }
-          "
         />
 
         <q-btn
           flat
-          label="ลบ"
           v-close-popup
+          label="ลบ"
           class="text-red"
-          @click="
+          @click="() => $emit('confirm')"
-            () => {
-              deleteFolder(pathname)
-              emit('update:confirmDelete')
-            }
-          "
         />
       </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
-
-<style lang="scss" scoped>
-.box {
-  display: inline-block;
-  border: 2px solid #f1f2f4;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.dashed {
-  opacity: 0.4;
-  display: inline-block;
-  border: 2px solid #babdc3;
-  border-radius: 8px;
-  cursor: pointer;
-  border-style: dashed;
-}
-
-.add-icon {
-  margin: auto auto;
-}
-
-.add-button {
-  position: absolute;
-  top: 75px;
-  right: 45px;
-  background-color: white;
-}
-</style>

Services/client/src/components/FileForm.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+    mode: 'create' | 'edit'
+    title?: string
+    description?: string
+    keyword?: string
+    category?: string
+  }>(),
+  {
+    open: false,
+  }
+)
+
+const emit = defineEmits([
+  'update:open',
+  'update:title',
+  'update:description',
+  'update:keyword',
+  'update:category',
+  'submit',
+])
+
+function keydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.open === true) {
+    emit('update:open', false)
+    reset()
+  }
+}
+
+function reset() {
+  file.value = undefined
+  emit('update:title', '')
+  emit('update:description', '')
+  emit('update:keyword', '')
+  emit('update:category', '')
+}
+
+function submit() {
+  emit('submit', {
+    mode: props.mode,
+    file: file.value,
+    title: props.title ?? '',
+    description: props.description ?? '',
+    keyword: props.keyword ?? '',
+    category: props.category ?? '',
+  })
+  reset()
+}
+
+onMounted(() => window.addEventListener('keydown', keydown))
+onUnmounted(() => window.addEventListener('keydown', keydown))
+
+const file = ref<File | undefined>()
+</script>
+
+<template>
+  <q-drawer
+    overlay
+    bordered
+    class="q-pa-md"
+    side="right"
+    tabindex="0"
+    :width="300"
+    :breakpoint="500"
+    :model-value="open"
+    @update:model-value="(v) => $emit('update:open', v)"
+  >
+    <q-form @submit.prevent="submit">
+      <q-toolbar class="q-mb-md q-pa-none">
+        <q-toolbar-title>
+          <span class="text-weight-bold" v-if="mode === 'create'">
+            สร้างเอกสาร
+          </span>
+          <span class="text-weight-bold" v-if="mode === 'edit'">
+            แก้ไขเอกสาร
+          </span>
+        </q-toolbar-title>
+        <q-btn
+          v-close-popup
+          flat
+          round
+          dense
+          icon="close"
+          color="red"
+          @click="() => ($emit('update:open', !open), reset())"
+        />
+      </q-toolbar>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold q-mb-sm block">อัพโหลดไฟล์</span>
+        <q-file
+          dense
+          outlined
+          v-model="file"
+          :label="file?.name ? undefined : 'เลือกไฟล์'"
+        >
+          <template v-slot:prepend>
+            <q-icon name="attach_file" />
+          </template>
+        </q-file>
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">ชื่อเรื่อง</span>
+        <q-input
+          outlined
+          dense
+          class="q-my-sm"
+          placeholder="กรอกชื่อเรื่อง"
+          :model-value="title"
+          @update:model-value="(v) => $emit('update:title', v)"
+        />
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">รายละเอียดของเอกสาร</span>
+        <q-input
+          outlined
+          dense
+          class="q-mt-sm no-resize"
+          type="textarea"
+          placeholder="กรอกรายละเอียด"
+          :model-value="description"
+          @update:model-value="(v) => $emit('update:description', v)"
+        />
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
+        <q-input
+          outlined
+          dense
+          class="q-mt-sm"
+          placeholder="เลือกกลุ่ม/หมวดหมู่"
+          :model-value="category"
+          @update:model-value="(v) => $emit('update:category', v)"
+        />
+      </section>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">คำสำคัญ</span>
+        <q-input
+          outlined
+          dense
+          class="q-mt-sm"
+          placeholder="คำสำคัญ"
+          :model-value="keyword"
+          @update:model-value="(v) => $emit('update:keyword', v)"
+        />
+      </section>
+
+      <section :style="{ display: 'flex', gap: '.5rem' }">
+        <q-btn label="บันทึก" type="submit" color="primary" />
+        <q-btn
+          label="ยกเลิก"
+          type="reset"
+          color="primary"
+          flat
+          @click="() => ($emit('update:open', false), reset())"
+        />
+      </section>
+    </q-form>
+  </q-drawer>
+</template>
+
+<style scoped>
+.no-resize >>> textarea {
+  resize: none;
+}
+</style>

Services/client/src/components/FileItem.vue

@@ -4,24 +4,34 @@ import { storeToRefs } from 'pinia'
 
 import FileIcon from '@/components/FileIcon.vue'
 import FileItemAction from '@/components/FileItemAction.vue'
-import FromEdit from '@/components/FromEdit.vue'
+import FileForm from './FileForm.vue'
-import FormUpload from '@/components/FormUpload.vue'
+import FolderForm from './FolderForm.vue'
 import { useTreeDataStore } from '@/stores/tree-data'
 import { useFileInfoStore } from '@/stores/file-info-data'
 
+const props = withDefaults(
+  defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
+  {
+    action: false,
+  }
+)
+
+const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const
+
 const { isPreview } = storeToRefs(useFileInfoStore())
 const { getFileInfo } = useFileInfoStore()
-const DEPT_NAME = ['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย']
-
 const { currentFolder, currentFile, currentDept, currentPath } = storeToRefs(
   useTreeDataStore()
 )
-const { getFolder, uploadFile } = useTreeDataStore()
+const {
-
+  createFolder,
-const drawer = ref<boolean>(false)
+  editFolder,
-const drawerFile = ref<boolean>(false)
+  getFolder,
-const drawerStatus = ref<'edit' | 'create'>('create')
+  deleteFolder,
-const editPathname = ref<string>('')
+  uploadFile,
+  updateFile,
+  deleteFile,
+} = useTreeDataStore()
 
 const currentIcon = computed(() =>
   currentDept.value === 0
@@ -30,19 +40,111 @@ const currentIcon = computed(() =>
     ? 'inbox'
     : 'o_folder_open'
 )
-const props = withDefaults(
+
-  defineProps<{ action: boolean; viewMode: 'view_list' | 'view_module' }>(),
+const folderFormState = ref<boolean>(false)
-  {
+const folderFormPath = ref<string>('')
-    action: false,
+const folderFormData = ref<{
+  name?: string
+}>({})
+const folderFormType = ref<'edit' | 'create'>('create')
+const fileFormState = ref<boolean>(false)
+const fileFormPath = ref<string>('')
+const fileFormData = ref<{
+  file?: File
+  title?: string
+  description?: string
+  keyword?: string
+  category?: string
+}>({})
+const fileFormType = ref<'edit' | 'create'>('create')
+
+function triggerFolderCreate() {
+  folderFormType.value = 'create'
+  folderFormData.value = {}
+  folderFormState.value = !folderFormState.value
+}
+
+function triggerFolderEdit(name: string, pathname: string) {
+  folderFormType.value = 'edit'
+  folderFormPath.value = pathname
+  folderFormData.value.name = name
+  folderFormState.value = true
+}
+
+async function submitFolderForm(value: {
+  mode: 'create' | 'edit'
+  name: string
+}) {
+  if (value.mode === 'create') {
+    await createFolder(value.name)
+  } else {
+    await editFolder(value.name, folderFormPath.value)
   }
-)
+}
+
+function triggerFileCreate() {
+  fileFormType.value = 'create'
+  fileFormData.value = {}
+  fileFormState.value = !fileFormState.value
+}
+
+function triggerFileEdit(
+  value: {
+    title: string
+    description: string
+    keyword: string
+    category: string
+  },
+  pathname: string
+) {
+  fileFormState.value = true
+  fileFormType.value = 'edit'
+  fileFormPath.value = pathname
+  fileFormData.value = {
+    title: value.title,
+    description: value.description,
+    keyword: value.keyword,
+    category: value.keyword,
+  }
+}
+
+async function submitFileForm(value: {
+  mode: 'create' | 'edit'
+  file: File
+  title: string
+  description: string
+  keyword: string
+  category: string
+}) {
+  if (value.mode === 'create') {
+    await uploadFile(currentPath.value, value.file, {
+      title: value.title,
+      description: value.description,
+      keyword: value.keyword,
+      category: value.category,
+    })
+  } else {
+    await updateFile(
+      fileFormPath.value,
+      {
+        title: value.title,
+        description: value.description,
+        keyword: value.keyword,
+        category: value.category,
+      },
+      value.file
+    )
+  }
+  fileFormData.value = {}
+  fileFormState.value = false
+}
 </script>
 
 <template>
   <div class="q-my-md">
-    <span class="text-h6 text-weight-light" v-if="currentDept === 3"
+    <span class="text-h6 text-weight-light" v-if="currentDept === 3">
-      >แฟ้มย่อย</span
+      แฟ้มย่อย
-    >
+    </span>
     <div class="q-gutter-md" v-if="currentDept < 3">
       <div
         :key="value.name"
@@ -68,22 +170,16 @@ const props = withDefaults(
                 v-if="props.action"
               >
                 <file-item-action
-                  :editname="value.name"
+                  @delete="() => deleteFolder(value.pathname)"
-                  :pathname="value.pathname"
+                  @edit="() => triggerFolderEdit(value.name, value.pathname)"
-                  @editname="
-                    () => {
-                      drawer = !drawer
-                      drawerStatus = 'edit'
-                      editPathname = value.pathname
-                    }
-                  "
                 />
               </div>
               <span
                 class="text-center q-pt-md text-overflow-handle"
                 style="max-width: 132px"
-                >{{ value.name }}</span
               >
+                {{ value.name }}
+              </span>
             </q-card-section>
           </q-card>
         </div>
@@ -94,16 +190,7 @@ const props = withDefaults(
         tabindex="0"
       >
         <div class="dashed border-radius-inherit">
-          <q-card
+          <q-card flat @click="() => triggerFolderCreate()">
-            flat
-            @click="
-              () => {
-                drawer = !drawer
-                drawerStatus = 'create'
-                drawerFile = false
-              }
-            "
-          >
             <q-card-section class="column justify-center relative q-px-xl">
               <q-icon
                 :name="currentIcon"
@@ -140,15 +227,8 @@ const props = withDefaults(
               />
               <span class="q-mx-md">{{ value.name }}</span>
               <file-item-action
-                :editname="value.name"
+                @delete="() => deleteFolder(value.pathname)"
-                :pathname="value.pathname"
+                @edit="() => triggerFolderEdit(value.name, value.pathname)"
-                @editname="
-                  () => {
-                    drawer = !drawer
-                    drawerStatus = 'edit'
-                    editPathname = value.pathname
-                  }
-                "
               />
             </q-td>
           </q-card>
@@ -160,16 +240,7 @@ const props = withDefaults(
         tabindex="0"
       >
         <div class="dashed border-radius-inherit q-px-lg q-py-sm">
-          <q-card
+          <q-card flat @click="() => triggerFolderCreate()">
-            flat
-            @click="
-              () => {
-                drawer = !drawer
-                drawerStatus = 'create'
-                drawerFile = false
-              }
-            "
-          >
             <q-td>
               <q-icon
                 :name="currentIcon"
@@ -192,83 +263,87 @@ const props = withDefaults(
       </div>
     </div>
   </div>
-    <span class="text-h6 text-weight-light" v-if="currentDept > 2"
+  <span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
-      >เอกสาร</span
+  <div class="q-gutter-md q-mt-xs">
+    <div
+      v-for="(value, index) in currentFile"
+      :key="value.title"
+      class="inline-block"
     >
-    <div class="q-gutter-md q-mt-xs">
+      <div class="box border-radius-inherit">
-      <div
+        <q-card
-        v-for="(value, index) in currentFile"
+          flat
-        :key="value.title"
+          @click="() => (getFileInfo(currentFile[index]), (isPreview = true))"
-        class="inline-block"
+        >
-      >
+          <q-card-section class="column justify-center relative q-px-xl">
-        <div class="box border-radius-inherit">
+            <file-icon
-          <q-card
+              size="preview"
-            flat
+              :fileMimeType="value.fileType"
-            @click="
+              ref="fileIconComp"
-              () => {
+            />
-                getFileInfo(currentFile[index])
+            <div
-                isPreview = true
+              class="absolute"
-              }
+              style="top: 0.5rem; right: 0.5rem"
-            "
+              v-if="props.action"
-          >
+            >
-            <q-card-section class="column justify-center relative q-px-xl">
+              <file-item-action
-              <file-icon
+                @edit="
-                size="preview"
+                  () =>
-                :fileMimeType="value.fileType"
+                    triggerFileEdit(
-                ref="fileIconComp"
+                      {
+                        title: value.title,
+                        description: value.description,
+                        keyword: value.keyword.join(','),
+                        category: value.category.join(','),
+                      },
+                      value.pathname
+                    )
+                "
+                @delete="() => deleteFile(value.pathname)"
               />
-              <div
+            </div>
-                class="absolute"
+            <span class="text-center q-pt-md">{{ value.title }}</span>
-                style="top: 0.5rem; right: 0.5rem"
+          </q-card-section>
-                v-if="props.action"
+        </q-card>
-              >
-                <!-- TODO: Edit file data -->
-              </div>
-              <span class="text-center q-pt-md">{{ value.title }}</span>
-            </q-card-section>
-          </q-card>
-        </div>
-      </div>
-      <div class="inline-block" v-if="props.action && currentDept > 2">
-        <div class="dashed border-radius-inherit">
-          <q-card
-            flat
-            @click="
-              () => {
-                drawerFile = !drawerFile
-                drawer = false
-              }
-            "
-          >
-            <q-card-section class="column justify-center relative q-px-xl">
-              <q-icon
-                name="mdi-file"
-                class="add-icon"
-                size="6em"
-                color="primary"
-              />
-              <q-btn round class="add-button" color="white" size="10px">
-                <q-icon name="add" color="primary" size="1.5rem"></q-icon>
-              </q-btn>
-              <span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
-            </q-card-section>
-          </q-card>
-        </div>
       </div>
     </div>
+    <div class="inline-block" v-if="props.action && currentDept > 2">
+      <div class="dashed border-radius-inherit">
+        <q-card flat @click="() => triggerFileCreate()">
+          <q-card-section class="column justify-center relative q-px-xl">
+            <q-icon
+              name="mdi-file"
+              class="add-icon"
+              size="6em"
+              color="primary"
+            />
+            <q-btn round class="add-button" color="white" size="10px">
+              <q-icon name="add" color="primary" size="1.5rem"></q-icon>
+            </q-btn>
+            <span class="text-center q-pt-md">สร้างไฟล์ใหม่</span>
+          </q-card-section>
+        </q-card>
+      </div>
+    </div>
+  </div>
 
-  <from-edit
+  <file-form
-    :drawer="drawer"
+    :mode="fileFormType"
-    :drawerStatus="drawerStatus"
+    v-model:open="fileFormState"
-    :DEPT_NAME="DEPT_NAME"
+    v-model:title="fileFormData.title"
-    :currentDept="currentDept"
+    v-model:description="fileFormData.description"
-    :editPathname="editPathname"
+    v-model:keyword="fileFormData.keyword"
-    @update:drawer="() => (drawer = false)"
+    v-model:category="fileFormData.category"
+    @submit="submitFileForm"
   />
 
-  <form-upload
+  <folder-form
-    :drawerFile="drawerFile"
+    :mode="folderFormType"
-    @update:drawerFile="() => (drawerFile = false)"
+    :tree="DEPT_NAME[currentDept]"
+    v-if="currentDept < 4"
+    v-model:open="folderFormState"
+    v-model:name="folderFormData.name"
+    @submit="submitFolderForm"
   />
 </template>
 
@@ -299,6 +374,7 @@ const props = withDefaults(
   right: 70px;
   background-color: white;
 }
+
 .add-button-folder-level {
   position: absolute;
   left: 30px;

Services/client/src/components/FileItemAction.vue

@@ -1,13 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+defineEmits(['edit', 'delete'])
-import DialogDelete from '@/components/DialogDelete.vue'
-
-const confirmDelete = ref<boolean>(false)
-defineProps<{
-  pathname: string
-  editname: string
-}>()
-defineEmits(['editname', 'deletename'])
 </script>
 
 <template>
@@ -15,7 +7,7 @@ defineEmits(['editname', 'deletename'])
     <q-menu auto-close>
       <q-list dense>
         <q-item clickable>
-          <q-item-section @click="() => $emit('editname')">
+          <q-item-section @click="() => $emit('edit')">
             <div class="row items-center">
               <q-icon name="edit" color="positive" />
               <span class="q-ml-sm">แก้ไข</span>
@@ -23,8 +15,7 @@ defineEmits(['editname', 'deletename'])
           </q-item-section>
         </q-item>
         <q-item clickable>
-          <!-- <q-item-section @click="() => deleteFolder(pathname)"> -->
+          <q-item-section @click="() => $emit('delete')">
-          <q-item-section @click="() => (confirmDelete = !confirmDelete)">
             <div class="row items-center">
               <q-icon name="delete" color="negative" />
               <span class="q-ml-sm">ลบ</span>
@@ -34,10 +25,4 @@ defineEmits(['editname', 'deletename'])
       </q-list>
     </q-menu>
   </q-btn>
-
-  <dialog-delete
-    :confirmDelete="confirmDelete"
-    :pathname="pathname"
-    @update:confirmDelete="() => (confirmDelete = false)"
-  />
 </template>

Services/client/src/components/FolderForm.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+    mode: 'create' | 'edit'
+    tree: 'ตู้เอกสาร' | 'ลิ้นชัก' | 'แฟ้ม' | 'แฟ้มย่อย'
+    name?: string
+  }>(),
+  {
+    open: false,
+  }
+)
+
+const emit = defineEmits(['update:open', 'update:name', 'submit'])
+
+function reset() {
+  emit('update:name', undefined)
+}
+
+function keydown(e: KeyboardEvent) {
+  if (e.key === 'Escape' && props.open === true) {
+    emit('update:open', false)
+    reset()
+  }
+}
+
+function submit() {
+  emit('submit', {
+    mode: props.mode,
+    name: props.name,
+  })
+  reset()
+}
+
+onMounted(() => window.addEventListener('keydown', keydown))
+onUnmounted(() => window.addEventListener('keydown', keydown))
+</script>
+
+<template>
+  <q-drawer
+    overlay
+    bordered
+    class="q-pa-md"
+    side="right"
+    tabindex="0"
+    :width="300"
+    :breakpoint="500"
+    :model-value="open"
+  >
+    <q-form @submit.prevent="submit">
+      <q-toolbar class="q-mb-md q-pa-none">
+        <q-toolbar-title>
+          <span class="text-weight-bold" v-if="mode === 'create'">
+            สร้าง{{ tree }}
+          </span>
+          <span class="text-weight-bold" v-if="mode === 'edit'">
+            แก้ไข{{ tree }}
+          </span>
+        </q-toolbar-title>
+        <q-btn
+          v-close-popup
+          flat
+          round
+          dense
+          icon="close"
+          color="red"
+          @click="() => $emit('update:open', !open)"
+        />
+      </q-toolbar>
+
+      <section class="q-mb-md">
+        <span class="text-weight-bold">ชื่อ{{ tree }}</span>
+        <q-input
+          outlined
+          dense
+          class="q-my-sm"
+          placeholder="กรอกชื่อ"
+          :model-value="name"
+          @update:model-value="(v) => $emit('update:name', v)"
+        />
+      </section>
+
+      <section :style="{ display: 'flex', gap: '.5rem' }">
+        <q-btn label="บันทึก" type="submit" color="primary" />
+        <q-btn
+          label="ยกเลิก"
+          type="reset"
+          color="primary"
+          flat
+          @click="() => ($emit('update:open', false), reset())"
+        />
+      </section>
+    </q-form>
+  </q-drawer>
+</template>
+
+<style scoped>
+.no-resize >>> textarea {
+  resize: none;
+}
+</style>

Services/client/src/stores/tree-data.ts

@@ -244,8 +244,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     metadata: {
       title: string
       description: string
-      keyword: string[]
+      keyword: string
-      category: string[]
+      category: string
     }
   ) {
     loader.show()
@@ -261,35 +261,102 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     if (pathArray.length >= 4) requestPath += `/subfolder/${pathArray[3]}`
     requestPath += '/file'
 
-    const formData = new FormData()
+    const res = await axiosClient.post<EhrFile & { upload: string }>(
+      `${apiEndpoint}${requestPath}`,
+      {
+        file: file.name,
+        ...metadata,
+      }
+    )
 
-    formData.append('file', file)
+    if (res && res.data.upload) {
-    formData.append('title', metadata.title)
+      await fetch(res.data.upload, {
-    formData.append('description', metadata.description)
+        method: 'PUT',
-    formData.append('keyword', metadata.keyword.join(','))
+        body: file,
-    formData.append('category', metadata.category.join(','))
+      })
 
-    await axiosClient.post(`${apiEndpoint}${requestPath}`, formData)
+      loader.hide()
+    }
 
-    if (currentDept.value === 0) await getCabinet()
+    if (currentDept.value === 0) {
-    else await getFolder(currentPath.value)
+      await getCabinet()
+    } else await getFolder(currentPath.value)
+
+    await getFile(currentPath.value)
 
     return loader.hide()
   }
 
-  function checkFile(nameFile: string) {
+  async function updateFile(
-    const fileExists = currentFile.value.some((element) => {
+    pathname: string,
-      if (element.fileName === nameFile) {
+    metadata: {
-        console.log(element.fileName + '===' + nameFile)
+      title: string
-        return true
+      description: string
-      }
+      keyword: string
-      return false
+      category: string
-    })
+    },
+    file?: File
+  ) {
+    loader.show()
 
-    if (fileExists) {
+    const pathArray: string[] = pathname.split('/').filter(Boolean)
-      return false
+
+    if (pathArray.length < 4) return loader.hide()
+
+    let requestPath = `cabinet/${pathArray[0]}/drawer/${pathArray[1]}`
+    if (pathArray.length >= 4) requestPath += `/folder/${pathArray[2]}`
+    if (pathArray.length >= 5) requestPath += `/subfolder/${pathArray[3]}`
+    requestPath += `/file/${pathArray.at(-1)}`
+
+    const res = await axiosClient.patch<{ upload: string }>(
+      `${apiEndpoint}${requestPath}`,
+      { file: file?.name, ...metadata }
+    )
+
+    if (res && res.data.upload) {
+      await fetch(res.data.upload, {
+        method: 'PUT',
+        body: file,
+      })
+
+      loader.hide()
     }
-    return true
+
+    if (currentDept.value === 0) {
+      await getCabinet()
+    } else await getFolder(currentPath.value)
+
+    await getFile(currentPath.value)
+
+    return loader.hide()
+  }
+
+  async function deleteFile(pathname: string) {
+    loader.show()
+
+    const pathArray: string[] = pathname.split('/').filter(Boolean)
+
+    if (pathArray.length < 4) return loader.hide()
+
+    let requestPath = `cabinet/${pathArray[0]}/drawer/${pathArray[1]}`
+    if (pathArray.length >= 4) requestPath += `/folder/${pathArray[2]}`
+    if (pathArray.length >= 5) requestPath += `/subfolder/${pathArray[3]}`
+    requestPath += `/file/${pathArray.at(-1)}`
+
+    console.log(requestPath, pathArray)
+    await axiosClient.delete(`${apiEndpoint}${requestPath}`)
+
+    if (currentDept.value === 0) {
+      await getCabinet()
+    } else await getFolder(currentPath.value)
+
+    await getFile(currentPath.value)
+
+    return loader.hide()
+  }
+
+  function checkFile(fileName: string) {
+    return currentFile.value.some((element) => element.fileName === fileName)
   }
 
   return {
@@ -303,6 +370,8 @@ export const useTreeDataStore = defineStore('changeCabinet', () => {
     getCabinet,
     getFolder,
     uploadFile,
+    updateFile,
+    deleteFile,
     gotoParent,
     createFolder,
     deleteFolder,