Skip to content

useFileDialog

Category
Export Size
577 B
Last Changed
2 weeks ago

Open file dialog with ease.

Demo

Usage

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 */
})
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
  /**
   * Initial files to set.
   * @default null
   */
  initialFiles?: Array<File> | FileList
  /**
   * The input element to use for file dialog.
   * @default document.createElement('input')
   */
  input?: MaybeElementRef<HTMLInputElement>
}
export interface UseFileDialogReturn {
  files: Ref<FileList | null>
  open: (localOptions?: Partial<UseFileDialogOptions>) => void
  reset: () => void
  onChange: EventHookOn<FileList | null>
  onCancel: EventHookOn
}
/**
 * Open file dialog with ease.
 *
 * @see https://vueuse.org/useFileDialog
 * @param options
 */
export declare function useFileDialog(
  options?: UseFileDialogOptions,
): UseFileDialogReturn

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
Ivan Shakhorski
Robin
Yauheni Vasiukevich
Andrey Yolkin
jinkaiqin
Doctorwu
huiliangShen
Sandra Rodgers
Damian Głowala
zaqvil
丶远方
1SZX1
ZHAO Jinxiang
Max
Robert Soriano

Changelog

v13.2.0 on
0ea16 - feat: Allow custom input element for file dialog (#4679)
v12.5.0 on
8a8d6 - feat: add initialFiles option (#4509)
v12.3.0 on
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v11.1.0 on
30452 - feat: return onCancel handler (#4184)
v10.10.0 on
424a2 - fix: check if input value exists before trigger onChange (#3972)
v10.7.0 on
7e2da - feat: trigger onChange when reset (#3548)
v10.6.0 on
cefca - feat: add directory parameters (#3513)
v10.2.0 on
6d847 - feat: add a parameter reset (#3059)
v10.0.0-beta.1 on
5e697 - feat: add listener for file change events (#2893)

Released under the MIT License.

2 days of talks + 1 day of live coding.
50+ speakers. All major frameworks!
Join for Free ➜