feat(useFileDialog): new function

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-183%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-184%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

packages/core/index.ts

@@ -41,6 +41,7 @@ export * from './useEventSource'
 export * from './useEyeDropper'
 export * from './useFavicon'
 export * from './useFetch'
+export * from './useFileDialog'
 export * from './useFocus'
 export * from './useFocusWithin'
 export * from './useFps'

packages/core/useFileDialog/demo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useFileDialog } from '.'
+
+const { files, openFileDialog } = useFileDialog()
+</script>
+
+<template>
+  <p>You have selected: {{ files ? files.length : 0 }} files</p>
+  <button type="button" @click="openFileDialog">
+    Choose file
+  </button>
+</template>

packages/core/useFileDialog/index.md

@@ -0,0 +1,21 @@
+---
+category: Browser
+---
+
+# useFileDialog
+
+Open file dialog with ease.
+
+## Usage
+
+```ts
+import { useFileDialog } from '@vueuse/core'
+
+const { files, openFileDialog } = useDialog()
+```
+
+```html
+<template>
+  <button type="button" @click="openFileDialog">Choose file</button>
+</template>
+```

packages/core/useFileDialog/index.ts

@@ -0,0 +1,52 @@
+import { readonly, ref } from 'vue-demi'
+
+export interface UseFileDialogOptions {
+  multiple?: boolean
+  accept?: string
+}
+
+const DEFAULT_OPTIONS: UseFileDialogOptions = {
+  multiple: true,
+  accept: '*',
+}
+
+/**
+ * Open file dialog with ease.
+ *
+ * @see https://vueuse.org/useFileDialog
+ * @param options
+ */
+export function useFileDialog(options?: Partial<UseFileDialogOptions>) {
+  const files = ref<FileList | null>(null)
+
+  const open = (localOptions?: Partial<UseFileDialogOptions>) => {
+    const _options = {
+      ...DEFAULT_OPTIONS,
+      ...options,
+      ...localOptions,
+    }
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.multiple = _options.multiple!
+    input.accept = _options.accept!
+
+    input.onchange = (event: Event) => {
+      const result = event.target as HTMLInputElement
+      files.value = result.files
+    }
+
+    input.click()
+  }
+
+  const reset = () => {
+    files.value = null
+  }
+
+  return {
+    files: readonly(files),
+    open,
+    reset,
+  }
+}
+
+export type UseFileDialogReturn = ReturnType<typeof useFileDialog>