wip: file upload basic

app/components/app/patient/entry-form.vue

@@ -3,7 +3,7 @@ import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Form } from '~/components/pub/ui/form'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
-import InputFile from './_common/input-file.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-upload.vue'
 import InputName from './_common/input-name.vue'
 import RadioCommunicationBarrier from './_common/radio-communication-barrier.vue'
 import RadioDisability from './_common/radio-disability.vue'
@@ -143,17 +143,21 @@ defineExpose({
         />
       </div>
       <div class="grid grid-cols-1 md:grid-cols-2">
-        <InputFile
+        <FileUpload
           field-name="identityCardFile"
           label="Dokumen KTP"
           placeholder="Unggah scan dokumen KTP"
           :errors="errors"
+          :accept="['pdf', 'jpg', 'png']"
+          :max-size-mb="1"
         />
-        <InputFile
+        <FileUpload
           field-name="familyCardFile"
           label="Dokumen KK"
           placeholder="Unggah scan dokumen KK"
           :errors="errors"
+          :accept="['pdf', 'jpg', 'png']"
+          :max-size-mb="1"
         />
       </div>
     </div>

app/components/pub/my-ui/form/file-upload.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+const props = defineProps<{
+  fieldName: string
+  label?: string
+  placeholder?: string
+  hint?: string
+  modelValue?: File | null
+  accept?: string[]
+  maxSizeMb?: number
+  errors?: FormErrors
+  class?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  icons?: string
+}>()
+
+const hintMsg = computed(() => {
+  if (props.hint) return props.hint
+  if (props.accept) {
+    return `Gunakan file dengan format (${props.accept.map((ext) => '.' + ext.replace(/^\./, '')).join(', ')}) maksimal ${props.maxSizeMb} MB`
+  }
+  return 'Gunakan file yang sesuai'
+})
+</script>
+
+<template>
+  <FieldGroup>
+    <Label
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </Label>
+    <Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              type="file"
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+            />
+          </FormControl>
+          <span class="my-2 text-xs">{{ hintMsg }}</span>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </Field>
+  </FieldGroup>
+</template>