From 6ea0683c6b3c3d1194c84d7fb4f8d417df52bf31 Mon Sep 17 00:00:00 2001
From: Liet Blue <127093491+lietblue@users.noreply.github.com>
Date: Thu, 27 Nov 2025 17:33:29 +0800
Subject: [PATCH] fix(ui): replace broken files reactive trigger in
 BasicInputFile (#769)

---
 .../components/Form/Input/BasicInputFile.vue  | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Form/Input/BasicInputFile.vue b/packages/ui/src/components/Form/Input/BasicInputFile.vue
index cca602449..7ea731d5a 100644
--- a/packages/ui/src/components/Form/Input/BasicInputFile.vue
+++ b/packages/ui/src/components/Form/Input/BasicInputFile.vue
@@ -8,30 +8,40 @@ const props = defineProps<{
   isNotDraggingClasses?: string | string[] | null
   accept?: string
   multiple?: boolean
+  modelValue?: File[]
 }>()
 
-const files = defineModel<File[]>({ required: false, default: () => [] })
+const emit = defineEmits<{
+  'update:modelValue': [files: File[]]
+}>()
+
+const files = ref<File[]>([])
 const firstFile = ref<File>()
 
 const isDragging = ref(false)
 const isDraggingDebounced = useDebounce(isDragging, 150)
 
 function handleFileChange(e: Event) {
-  files.value = []
-
   const input = e.target as HTMLInputElement
   if (!input.files)
     return
 
-  for (let i = 0; i < input.files?.length; i++) {
+  files.value = []
+
+  for (let i = 0; i < input.files.length; i++) {
     files.value.push(input.files[i])
   }
 
-  if (files.value && files.value.length > 0) {
+  emit('update:modelValue', files.value)
+
+  if (files.value.length > 0) {
     firstFile.value = files.value[0]
   }
 
   isDragging.value = false
+
+  // Allow re-selecting the same file
+  input.value = ''
 }
 </script>