1---
2category: Browser
3---
4 
5# useFileDialog
6 
7Open file dialog with ease.
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useFileDialog } from '@vueuse/core'
14 
15const { files, open, reset, onCancel, onChange } = useFileDialog({
16  accept: 'image/*', // Set to accept only image files
17  directory: true, // Select directories instead of files if set true
18})
19 
20onChange((files) => {
21  /** do something with files */
22})
23 
24onCancel(() => {
25  /** do something on cancel */
26})
27</script>
28 
29<template>
30  <button type="button" @click="open">
31    Choose file
32  </button>
33</template>
34```
35 
36## Type Declarations
37 
38```ts
39export interface UseFileDialogOptions extends ConfigurableDocument {
40  /**
41   * @default true
42   */
43  multiple?: MaybeRef<boolean>
44  /**
45   * @default '*'
46   */
47  accept?: MaybeRef<string>
48  /**
49   * Select the input source for the capture file.
50   * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
51   */
52  capture?: MaybeRef<string>
53  /**
54   * Reset when open file dialog.
55   * @default false
56   */
57  reset?: MaybeRef<boolean>
58  /**
59   * Select directories instead of files.
60   * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
61   * @default false
62   */
63  directory?: MaybeRef<boolean>
64  /**
65   * Initial files to set.
66   * @default null
67   */
68  initialFiles?: Array<File> | FileList
69  /**
70   * The input element to use for file dialog.
71   * @default document.createElement('input')
72   */
73  input?: MaybeElementRef<HTMLInputElement>
74}
75export interface UseFileDialogReturn {
76  files: Ref<FileList | null>
77  open: (localOptions?: Partial<UseFileDialogOptions>) => void
78  reset: () => void
79  onChange: EventHookOn<FileList | null>
80  onCancel: EventHookOn
81}
82/**
83 * Open file dialog with ease.
84 *
85 * @see https://vueuse.org/useFileDialog
86 * @param options
87 */
88export declare function useFileDialog(
89  options?: UseFileDialogOptions,
90): UseFileDialogReturn
91```
92