VueUseuseFileDialog
Open file dialog with ease.
Demo
Usage
ts
import { useFileDialog } from '@vueuse/core'
const { files, open, reset } = useFileDialog()
import { useFileDialog } from '@vueuse/core'
const { files, open, reset } = useFileDialog()
html
<template>
<button type="button" @click="open">Choose file</button>
</template>
<template>
<button type="button" @click="open">Choose file</button>
</template>
Type Declarations
typescript
export interface UseFileDialogOptions extends ConfigurableDocument {
/**
* @default true
*/
multiple?: boolean
/**
* @default '*'
*/
accept?: 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
}
export interface UseFileDialogReturn {
files: Ref<FileList | null>
open: (localOptions?: Partial<UseFileDialogOptions>) => void
reset: () => void
}
/**
* Open file dialog with ease.
*
* @see https://vueuse.org/useFileDialog
* @param options
*/
export declare function useFileDialog(
options?: UseFileDialogOptions
): UseFileDialogReturn
export interface UseFileDialogOptions extends ConfigurableDocument {
/**
* @default true
*/
multiple?: boolean
/**
* @default '*'
*/
accept?: 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
}
export interface UseFileDialogReturn {
files: Ref<FileList | null>
open: (localOptions?: Partial<UseFileDialogOptions>) => void
reset: () => void
}
/**
* Open file dialog with ease.
*
* @see https://vueuse.org/useFileDialog
* @param options
*/
export declare function useFileDialog(
options?: UseFileDialogOptions
): UseFileDialogReturn
Source
Contributors
1SZX1
ZHAO Jinxiang
Max
Anthony Fu
Robert Soriano