feat(useFileDialog): add MaybRef to multiple, accept, capture, reset,…

… and directory
vueuse · antfu · Jul 28, 2025 · Jun 11, 2025 · Jun 13, 2025 · Jun 13, 2025
commit 6c435dd545d2a09d218b111f85e4ed2093b45d6d
diff --git a/packages/core/useFileDialog/index.test.ts b/packages/core/useFileDialog/index.test.ts
@@ -93,4 +93,95 @@ describe('useFileDialog', () => {
     expect(files.value?.[0]).toEqual(file)
     expect(changeHandler).toHaveBeenCalledWith(files.value)
   })
+
+  it('should work with ref value for multiple option', () => {
+    const input = document.createElement('input')
+    input.click = vi.fn()
+
+    const multipleRef = shallowRef(true)
+
+    const { open } = useFileDialog({
+      input,
+      multiple: multipleRef,
+    })
+
+    open()
+    expect(input.multiple).toBe(true)
+
+    multipleRef.value = false
+    open()
+    expect(input.multiple).toBe(false)
+  })
+
+  it('should work with ref value for accept option', () => {
+    const input = document.createElement('input')
+    input.click = vi.fn()
+
+    const acceptRef = shallowRef('image/*')
+
+    const { open } = useFileDialog({
+      input,
+      accept: acceptRef,
+    })
+
+    open()
+    expect(input.accept).toBe('image/*')
+
+    acceptRef.value = 'video/*'
+    open()
+    expect(input.accept).toBe('video/*')
+  })
+
+  it('should work with ref value for directory option', () => {
+    const input = document.createElement('input')
+    input.click = vi.fn()
+
+    const directoryRef = shallowRef(true)
+
+    const { open } = useFileDialog({
+      input,
+      directory: directoryRef,
+    })
+
+    open()
+    expect(input.webkitdirectory).toBe(true)
+
+    directoryRef.value = false
+    open()
+    expect(input.webkitdirectory).toBe(false)
+  })
+
+  it('should work with ref value for reset option', () => {
+    const input = document.createElement('input')
+    input.click = vi.fn()
+
+    const resetRef = shallowRef(true)
+
+    const { open } = useFileDialog({
+      input,
+      reset: resetRef,
+    })
+
+    open()
+    expect(input.click).toHaveBeenCalled() // Assuming reset does not change input attributes
+  })
+
+  it('should work with ref value for capture option', () => {
+    const input = document.createElement('input')
+    input.click = vi.fn()
+
+    const captureRef = shallowRef('user')
+
+    const { open } = useFileDialog({
+      input,
+      capture: captureRef,
+    })
+
+    open()
+    expect(input.capture).toBe('user')
+
+    captureRef.value = 'environment'
+    open()
+    expect(input.capture).toBe('environment')
+  })
 })
diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
@@ -1,37 +1,37 @@
 import type { EventHookOn } from '@vueuse/shared'
-import type { Ref } from 'vue'
+import type { MaybeRef, Ref } from 'vue'
 import type { ConfigurableDocument } from '../_configurable'
 import type { MaybeElementRef } from '../unrefElement'
 import { createEventHook, hasOwn } from '@vueuse/shared'
-import { ref as deepRef, readonly } from 'vue'
+import { ref as deepRef, readonly, toValue } from 'vue'
 import { defaultDocument } from '../_configurable'
 import { unrefElement } from '../unrefElement'
 
 export interface UseFileDialogOptions extends ConfigurableDocument {
   /**
    * @default true
    */
-  multiple?: boolean
+  multiple?: MaybeRef<boolean>
   /**
    * @default '*'
    */
-  accept?: string
+  accept?: MaybeRef<string>
   /**
    * Select the input source for the capture file.
    * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
    */
-  capture?: string
+  capture?: MaybeRef<string>
   /**
    * Reset when open file dialog.
    * @default false
    */
-  reset?: boolean
+  reset?: MaybeRef<boolean>
   /**
    * Select directories instead of files.
    * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
    * @default false
    */
-  directory?: boolean
+  directory?: MaybeRef<boolean>
 
   /**
    * Initial files to set.
@@ -122,13 +122,13 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
       ...options,
       ...localOptions,
     }
-    input.multiple = _options.multiple!
-    input.accept = _options.accept!
+    input.multiple = toValue(_options.multiple)!
+    input.accept = toValue(_options.accept)!
     // webkitdirectory key is not stabled, maybe replaced in the future.
-    input.webkitdirectory = _options.directory!
+    input.webkitdirectory = toValue(_options.directory)!
     if (hasOwn(_options, 'capture'))
-      input.capture = _options.capture!
-    if (_options.reset)
+      input.capture = toValue(_options.capture)!
+    if (toValue(_options.reset))
       reset()
     input.click()
   }