useFileDialog
Open file dialog with ease.
Package: @vueuse/core
Category: Browser
Usage
<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'
const { files, open, reset, onCancel, onChange } = useFileDialog({
accept: 'image/*', // Set to accept only image files
directory: true, // Select directories instead of files if set true
})
onChange((files) => {
/** do something with files */
})
onCancel(() => {
/** do something on cancel */
})
</script>
<template>
<button type="button" @click="open">
Choose file
</button>
</template>Options
| Option | Type | Default | Description |
|---|---|---|---|
| multiple | MaybeRef<boolean> |
true | @default true |
| accept | MaybeRef<string> |
- | @default '*' |
| capture | MaybeRef<string> |
- | Select the input source for the capture file. |
| reset | MaybeRef<boolean> |
false | Reset when open file dialog. |
| directory | MaybeRef<boolean> |
false | Select directories instead of files. |
| initialFiles | Array<File> | FileList |
null | Initial files to set. |
| input | MaybeElementRef<HTMLInputElement> |
document.createElement( | The input element to use for file dialog. |
Returns
| Name | Type |
|---|---|
| files | deepRef<FileList | null> |
| open | Ref |
| reset | Ref |
| onCancel | Ref |
| onChange | Ref |