chore: consolidate new foundation and archive v1 (#1495)

2026-09-07 12:32:57 -05:00
parent 9a5fbdbda7 5d27700026
commit 127a54fdff
3511 changed files with 727899 additions and 10 deletions
@@ -0,0 +1,87 @@
+---
+category: Browser
+---
+
+# useFileDialog
+
+Open file dialog with ease.
+
+## 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
+
+```ts
+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;
+```