Skip to content

useFileDialog ​

Category
Export Size
707 B
Last Changed
3 months ago

Open file dialog with ease.

Demo ​

Usage ​

ts
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) => {
  /** do something with files */
})
vue
<template>
  <button type="button" @click="open">
    Choose file
  </button>
</template>

Type Declarations ​

Show 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
  /**
   * Reset when open file dialog.
   * @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
}
export interface UseFileDialogReturn {
  files: Ref<FileList | null>
  open: (localOptions?: Partial<UseFileDialogOptions>) => void
  reset: () => void
  onChange: EventHookOn<FileList | null>
}
/**
 * Open file dialog with ease.
 *
 * @see https://vueuse.org/useFileDialog
 * @param options
 */
export declare function useFileDialog(
  options?: UseFileDialogOptions,
): UseFileDialogReturn

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Doctorwu
huiliangShen
Sandra Rodgers
Damian GÅ‚owala
zaqvil
丶远方
1SZX1
ZHAO Jinxiang
Max
Robert Soriano

Changelog ​

v10.7.0 on 12/5/2023
7e2da - feat: trigger onChange when reset (#3548)
v10.6.0 on 11/9/2023
cefca - feat: add directory parameters (#3513)
v10.2.0 on 6/16/2023
6d847 - feat: add a parameter reset (#3059)
v10.0.0-beta.1 on 3/23/2023
5e697 - feat: add listener for file change events (#2893)
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)

Released under the MIT License.