wip: file upload basic

2025-10-14 13:41:15 +07:00
parent ed9dcd9753
commit dd0c2864c7
2 changed files with 73 additions and 3 deletions
@@ -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>