From 7e915cc2bfbad3e0c57dd20ee76cdec3292fdf85 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Fri, 1 Aug 2025 14:16:24 +0200
Subject: [PATCH 1/3] fix(useFileUpload): dataTypes check for base types

---
 src/runtime/composables/useFileUpload.ts | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 9f7c15612b..9e80035d34 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -67,9 +67,31 @@ export function useFileUpload(options: UseFileUploadOptions) {
   }
 
   onMounted(() => {
-    const { isOverDropZone } = dropzone
-      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
-      : { isOverDropZone: ref(false) }
+    const { isOverDropZone } = useDropZone(dropzoneRef, {
+      dataTypes: (types) => {
+        if (dataTypes.value === undefined || accept === '*') {
+          return true
+        }
+
+        return types.some((type) => {
+          return dataTypes.value?.some((accepted) => {
+            if (accepted.endsWith('/*')) {
+              const base = accepted.slice(0, accepted.indexOf('/'))
+              return type.startsWith(base + '/')
+            } else {
+              return type === accepted
+            }
+          })
+        })
+      }, onDrop: (files, event) => {
+        if (!dropzone) {
+          event.preventDefault()
+          return
+        }
+
+        onDrop(files)
+      }
+    })
 
     watch(isOverDropZone, (value) => {
       isDragging.value = value

From eb538dc6782b10f6c630780405681dd855814bcb Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Fri, 1 Aug 2025 14:37:02 +0200
Subject: [PATCH 2/3] fix(file-upload): broken reactivity for useFileUpload
 options

Changing the props would lead to no updates which made the
documentation example broken.
---
 src/runtime/components/FileUpload.vue    |  6 ++---
 src/runtime/composables/useFileUpload.ts | 31 ++++++++++++------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/runtime/components/FileUpload.vue b/src/runtime/components/FileUpload.vue
index e35ff0c8e7..c9eeee0703 100644
--- a/src/runtime/components/FileUpload.vue
+++ b/src/runtime/components/FileUpload.vue
@@ -126,7 +126,7 @@ export interface FileUploadSlots<M extends boolean = false> {
 <script setup lang="ts" generic="M extends boolean = false">
 import { computed, watch } from 'vue'
 import { Primitive } from 'reka-ui'
-import { createReusableTemplate } from '@vueuse/core'
+import { createReusableTemplate, reactiveComputed } from '@vueuse/core'
 import { useAppConfig, useLocale } from '#imports'
 import { useFormField } from '../composables/useFormField'
 import { useFileUpload } from '../composables/useFileUpload'
@@ -157,13 +157,13 @@ const { t } = useLocale()
 
 const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate()
 
-const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
+const { isDragging, open, inputRef, dropzoneRef } = useFileUpload(reactiveComputed(() => ({
   accept: props.accept,
   reset: props.reset,
   multiple: props.multiple,
   dropzone: props.dropzone,
   onUpdate
-})
+})))
 const { emitFormInput, emitFormChange, id, name, disabled, ariaAttrs } = useFormField<FileUploadProps>(props)
 
 const variant = computed(() => props.multiple ? 'area' : props.variant)
diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 9e80035d34..5d34cac258 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -1,6 +1,7 @@
 import { ref, computed, unref, onMounted, watch, reactive } from 'vue'
 import { useFileDialog, useDropZone } from '@vueuse/core'
 import type { MaybeRef } from '@vueuse/core'
+import { defu } from 'defu'
 
 export interface UseFileUploadOptions {
   /**
@@ -31,17 +32,17 @@ function parseAcceptToDataTypes(accept: string): string[] | undefined {
 }
 
 export function useFileUpload(options: UseFileUploadOptions) {
-  const {
-    accept = '*',
-    reset = false,
-    multiple = false,
-    dropzone = true,
-    onUpdate
-  } = options
+  const optionsComputed = computed(() => defu({
+    accept: '*',
+    reset: false,
+    multiple: false,
+    dropzone: true
+  }, options))
+
   const inputRef = ref<HTMLInputElement>()
   const dropzoneRef = ref<HTMLDivElement>()
 
-  const dataTypes = computed(() => parseAcceptToDataTypes(unref(accept)))
+  const dataTypes = computed(() => parseAcceptToDataTypes(unref(optionsComputed.value.accept)))
 
   const onDrop = (files: FileList | File[] | null) => {
     if (!files || files.length === 0) {
@@ -50,10 +51,10 @@ export function useFileUpload(options: UseFileUploadOptions) {
     if (files instanceof FileList) {
       files = Array.from(files)
     }
-    if (files.length > 1 && !multiple) {
+    if (files.length > 1 && !optionsComputed.value.multiple) {
       files = [files[0]!]
     }
-    onUpdate(files)
+    optionsComputed.value.onUpdate(files)
   }
 
   const isDragging = ref(false)
@@ -69,7 +70,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
   onMounted(() => {
     const { isOverDropZone } = useDropZone(dropzoneRef, {
       dataTypes: (types) => {
-        if (dataTypes.value === undefined || accept === '*') {
+        if (dataTypes.value === undefined || optionsComputed.value.accept === '*') {
           return true
         }
 
@@ -84,7 +85,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
           })
         })
       }, onDrop: (files, event) => {
-        if (!dropzone) {
+        if (!optionsComputed.value.dropzone) {
           event.preventDefault()
           return
         }
@@ -98,10 +99,10 @@ export function useFileUpload(options: UseFileUploadOptions) {
     })
 
     const { onChange, open } = useFileDialog({
-      accept: unref(accept),
-      multiple,
+      accept: unref(optionsComputed.value.accept),
+      multiple: optionsComputed.value.multiple,
       input: unref(inputRef),
-      reset
+      reset: optionsComputed.value.reset
     })
 
     fileDialog.open = open

From 0e684adc30b9eaa34ef247f07d5a1df9ec565acf Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Fri, 1 Aug 2025 14:45:17 +0200
Subject: [PATCH 3/3] refactor(useFileUpload): simplify the code

---
 src/runtime/composables/useFileUpload.ts | 55 +++++++++++-------------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 5d34cac258..888a7e8d5a 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -1,4 +1,4 @@
-import { ref, computed, unref, onMounted, watch, reactive } from 'vue'
+import { ref, computed, unref, onMounted, reactive, readonly } from 'vue'
 import { useFileDialog, useDropZone } from '@vueuse/core'
 import type { MaybeRef } from '@vueuse/core'
 import { defu } from 'defu'
@@ -57,7 +57,6 @@ export function useFileUpload(options: UseFileUploadOptions) {
     optionsComputed.value.onUpdate(files)
   }
 
-  const isDragging = ref(false)
   const fileDialog = reactive({
     open: () => {
     }
@@ -67,37 +66,33 @@ export function useFileUpload(options: UseFileUploadOptions) {
     fileDialog.open()
   }
 
-  onMounted(() => {
-    const { isOverDropZone } = useDropZone(dropzoneRef, {
-      dataTypes: (types) => {
-        if (dataTypes.value === undefined || optionsComputed.value.accept === '*') {
-          return true
-        }
-
-        return types.some((type) => {
-          return dataTypes.value?.some((accepted) => {
-            if (accepted.endsWith('/*')) {
-              const base = accepted.slice(0, accepted.indexOf('/'))
-              return type.startsWith(base + '/')
-            } else {
-              return type === accepted
-            }
-          })
-        })
-      }, onDrop: (files, event) => {
-        if (!optionsComputed.value.dropzone) {
-          event.preventDefault()
-          return
-        }
+  const { isOverDropZone: isDragging } = useDropZone(dropzoneRef, {
+    dataTypes: (types) => {
+      if (dataTypes.value === undefined || optionsComputed.value.accept === '*') {
+        return true
+      }
 
-        onDrop(files)
+      return types.some((type) => {
+        return dataTypes.value?.some((accepted) => {
+          if (accepted.endsWith('/*')) {
+            const base = accepted.slice(0, accepted.indexOf('/'))
+            return type.startsWith(base + '/')
+          } else {
+            return type === accepted
+          }
+        })
+      })
+    }, onDrop: (files, event) => {
+      if (!optionsComputed.value.dropzone) {
+        event.preventDefault()
+        return
       }
-    })
 
-    watch(isOverDropZone, (value) => {
-      isDragging.value = value
-    })
+      onDrop(files)
+    }
+  })
 
+  onMounted(() => {
     const { onChange, open } = useFileDialog({
       accept: unref(optionsComputed.value.accept),
       multiple: optionsComputed.value.multiple,
@@ -111,7 +106,7 @@ export function useFileUpload(options: UseFileUploadOptions) {
   })
 
   return {
-    isDragging,
+    isDragging: readonly(isDragging),
     open,
     inputRef,
     dropzoneRef