feat(useFileDialog): add directory parameters (#3513)

Co-authored-by: banruo <shl@dataqin.com>
vueuse · Nov 9, 2023 · cefca9a · cefca9a
1 parent b6d2bd3
commit cefca9a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/packages/core/useFileDialog/index.md b/packages/core/useFileDialog/index.md
@@ -13,6 +13,7 @@ import { useFileDialog } from '@vueuse/core'
 
 const { files, open, reset, onChange } = useFileDialog({
   accept: 'image/*', // Set to accept only image files
+  directory: true, // Select directories instead of files if set true
 })
 
 onChange((files) => {

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
@@ -23,12 +23,19 @@ export interface UseFileDialogOptions extends ConfigurableDocument {
    * @default false
    */
   reset?: boolean
+  /**
+   * Select directories instead of files.
+   * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+   * @default false
+   */
+  directory?: boolean
 }
 
 const DEFAULT_OPTIONS: UseFileDialogOptions = {
   multiple: true,
   accept: '*',
   reset: false,
+  directory: false,
 }
 
 export interface UseFileDialogReturn {
@@ -79,6 +86,8 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     }
     input.multiple = _options.multiple!
     input.accept = _options.accept!
+    // webkitdirectory key is not stabled, maybe replaced in the future.
+    input.webkitdirectory = _options.directory!
     if (hasOwn(_options, 'capture'))
       input.capture = _options.capture!
     if (_options.reset)