useFileDialog

Demo

Usage

vue

<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>

Type Declarations

Show Type Declarations

export interface UseFileDialogOptions extends ConfigurableDocument {
  /**
   * @default true
   */
  multiple
?: MaybeRef
<boolean>
  /**
   * @default '*'
   */
  accept
?: MaybeRef
<string>
  /**
   * Select the input source for the capture file.
   * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
   */
  capture
?: MaybeRef
<string>
  /**
   * Reset when open file dialog.
   * @default false
   */
  reset
?: MaybeRef
<boolean>
  /**
   * Select directories instead of files.
   * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
   * @default false
   */
  directory
?: MaybeRef
<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