stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useFileDialog.md

category

category
Browser

useFileDialog

Open file dialog with ease.

Usage

<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

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;