Skip to content
On this page

useFileDialog

Category
Export Size
978 B
Last Changed
6 months ago

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

SourceDemoDocs

Contributors

1SZX1
ZHAO Jinxiang
Max
Anthony Fu
Robert Soriano

Changelog

v9.2.0 on 9/5/2022
c463a - fix: choose file not work on mobile (#2080)
v8.9.4 on 7/17/2022
46192 - fix: explict UseFileDialogReturn type (#1927)
v8.9.1 on 7/8/2022
58a45 - fix: SSR compatible, close #1788
v8.9.0 on 7/6/2022
44526 - feat: new function (#1218)

Released under the MIT License.