feat: modify file upload component

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

@@ -547,11 +547,12 @@ defineExpose({
             <FileUpload
               field-name="sepFile"
               label="Dokumen SEP"
-              placeholder=""
+              placeholder="Pilih file"
               :accept="['pdf', 'jpg', 'png']"
               :max-size-mb="1"
               v-model="sepFile"
               v-bind="sepFileAttrs"
+              @file-selected="(file: any) => { console.log(file) }"
             />
             <span class="mt-1 text-sm text-gray-500">
               {{ noteFile }}
@@ -562,11 +563,12 @@ defineExpose({
             <FileUpload
               field-name="sippFile"
               label="Dokumen SIPP"
-              placeholder=""
+              placeholder="Pilih file"
               :accept="['pdf', 'jpg', 'png']"
               :max-size-mb="1"
               v-model="sippFile"
               v-bind="sippFileAttrs"
+              @file-selected="(file: any) => { console.log(file) }"
             />
             <span class="mt-1 text-sm text-gray-500">
               {{ noteFile }}

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

@@ -8,7 +8,7 @@ import { cn } from '~/lib/utils'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 
-const props = defineProps<{
+interface Props {
   fieldName: string
   label?: string
   placeholder?: string
@@ -21,6 +21,19 @@ const props = defineProps<{
   isRequired?: boolean
   isDisabled?: boolean
   icons?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  placeholder: 'Choose file...',
+  maxSizeMb: 1,
+  isDisabled: false,
+  isRequired: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: File | null): void
+  (e: 'fileSelected', file: File | null): void
 }>()
 
 const hintMsg = computed(() => {
@@ -35,7 +48,38 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
 
+  if (!file) {
+    handleChange(null)
+    emit('update:modelValue', null)
+    emit('fileSelected', null)
+    return
+  }
+
+  // Validate file size
+  const maxSizeBytes = props.maxSizeMb * 1024 * 1024
+  if (file.size > maxSizeBytes) {
+    console.warn(`File size exceeds ${props.maxSizeMb}MB limit`)
+    handleChange(null)
+    emit('update:modelValue', null)
+    emit('fileSelected', null)
+    return
+  }
+
+  // Validate file type if accept is specified
+  if (props.accept) {
+    const acceptedTypes = Array.isArray(props.accept) ? props.accept.map((ext) => `image/${ext}`) : [props.accept]
+    if (!acceptedTypes.includes(file.type)) {
+      console.warn(`File type not allowed: ${file.type}`)
+      handleChange(null)
+      emit('update:modelValue', null)
+      emit('fileSelected', null)
+      return
+    }
+  }
+
   handleChange(file)
+  emit('update:modelValue', file)
+  emit('fileSelected', file)
 }
 </script>
 
@@ -62,7 +106,7 @@ async function onFileChange(event: Event, handleChange: (value: any) => void) {
               @change="onFileChange($event, handleChange)"
               type="file"
               :disabled="isDisabled"
-              v-bind="{ onBlur: componentField.onBlur }" 
+              v-bind="{ onBlur: componentField.onBlur }"
               :placeholder="placeholder"
               :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
             />