diff --git a/Services/client/src/components/FileFormWrapper.vue b/Services/client/src/components/FileFormWrapper.vue
new file mode 100644
index 0000000..5ed7262
--- /dev/null
+++ b/Services/client/src/components/FileFormWrapper.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useStorage from '@/stores/storage'
+import FileForm from './FileForm.vue'
+
+const storageStore = useStorage()
+const { file, currentInfo } = storeToRefs(storageStore)
+const { createFile, updateFile } = storageStore
+
+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')
+const fileFormError = ref<{ fileExist?: boolean; fileName2Long?: boolean }>({})
+const fileExistNotification = ref<boolean>(false)
+const fileFormComponent = ref<InstanceType<typeof FileForm>>()
+
+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.category,
+  }
+}
+
+defineExpose({
+  triggerFileCreate,
+  triggerFileEdit,
+})
+
+const currentParam = ref<Parameters<typeof submitFileForm>[0]>()
+
+function checkFileExist(name: string) {
+  return Boolean(
+    file.value[currentInfo.value.path].find((v) => v.fileName === name),
+  )
+}
+
+async function submitFileForm(
+  value: {
+    mode: 'create' | 'edit'
+    file?: File
+    title: string
+    description: string
+    keyword: string[]
+    category: string[]
+  },
+  force = false,
+) {
+  currentParam.value = value
+
+  if (
+    value.file &&
+    file.value[currentInfo.value.path].find(
+      (v) => v.fileName === value.file?.name,
+    ) &&
+    !force
+  ) {
+    fileExistNotification.value = true
+    return
+  }
+
+  if (value.mode === 'create' && value.file) {
+    await createFile(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
+  currentParam.value = undefined
+  fileFormComponent.value?.reset()
+}
+</script>
+
+<template>
+  <file-form
+    ref="fileFormComponent"
+    :mode="fileFormType"
+    :error="fileFormError"
+    v-model:open="fileFormState"
+    v-model:title="fileFormData.title"
+    v-model:description="fileFormData.description"
+    v-model:keyword="fileFormData.keyword"
+    v-model:category="fileFormData.category"
+    @reset="() => (fileFormError = {})"
+    @filechange="
+      (name: string) => (fileFormError.fileExist = checkFileExist(name))
+    "
+    @submit="submitFileForm"
+  />
+  <upload-exist-dialog
+    v-model:notification="fileExistNotification"
+    @confirm="() => currentParam && submitFileForm(currentParam, true)"
+    @cancel="() => (currentParam = undefined)"
+  />
+</template>
diff --git a/Services/client/src/components/FolderFormWrapper.vue b/Services/client/src/components/FolderFormWrapper.vue
new file mode 100644
index 0000000..5f42442
--- /dev/null
+++ b/Services/client/src/components/FolderFormWrapper.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import useStorage from '@/stores/storage'
+import FolderForm from './FolderForm.vue'
+
+const storageStore = useStorage()
+const { file, currentInfo } = storeToRefs(storageStore)
+const { createFolder, editFolder } = storageStore
+
+const folderFormState = ref<boolean>(false)
+const folderFormPath = ref<string>('')
+const folderFormData = ref<{
+  name?: string
+}>({})
+const folderFormType = 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
+}
+
+defineExpose({
+  triggerFolderCreate,
+  triggerFolderEdit,
+})
+
+async function submitFolderForm(value: {
+  mode: 'create' | 'edit'
+  name: string
+}) {
+  if (value.mode === 'create') {
+    await createFolder(value.name)
+  } else {
+    await editFolder(value.name, folderFormPath.value)
+  }
+}
+</script>
+
+<template>
+  <folder-form
+    :mode="folderFormType"
+    :tree="
+      (['ตู้เอกสาร', 'ลิ้นชัก', 'แฟ้ม', 'แฟ้มย่อย'] as const)[currentInfo.dept]
+    "
+    v-if="currentInfo.dept < 4"
+    v-model:open="folderFormState"
+    v-model:name="folderFormData.name"
+    @submit="submitFolderForm"
+  />
+</template>