From d6b35ce0f91846ff5eb02165b628e77cc9a282df Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Mon, 7 Feb 2022 09:53:33 +0800
Subject: [PATCH 01/10] feat(useFileDialog): new function

---
 README.md                            |  2 +-
 packages/core/index.ts               |  1 +
 packages/core/useFileDialog/demo.vue | 12 +++++++
 packages/core/useFileDialog/index.md | 21 +++++++++++++
 packages/core/useFileDialog/index.ts | 47 ++++++++++++++++++++++++++++
 5 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/useFileDialog/demo.vue
 create mode 100644 packages/core/useFileDialog/index.md
 create mode 100644 packages/core/useFileDialog/index.ts

diff --git a/README.md b/README.md
index 9fbdfe76056..bd05d7d0ef5 100644
--- a/README.md
+++ b/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>
diff --git a/packages/core/index.ts b/packages/core/index.ts
index d84f63e9270..3cb71f1d0c6 100644
--- a/packages/core/index.ts
+++ b/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'
diff --git a/packages/core/useFileDialog/demo.vue b/packages/core/useFileDialog/demo.vue
new file mode 100644
index 00000000000..f0a0d51fb4e
--- /dev/null
+++ b/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>
diff --git a/packages/core/useFileDialog/index.md b/packages/core/useFileDialog/index.md
new file mode 100644
index 00000000000..f3c42f37d8e
--- /dev/null
+++ b/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>
+```
diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
new file mode 100644
index 00000000000..44b126499df
--- /dev/null
+++ b/packages/core/useFileDialog/index.ts
@@ -0,0 +1,47 @@
+import { readonly, ref } from 'vue-demi'
+
+export interface Options {
+  multiple?: boolean
+  accept?: string
+}
+
+const DEFAULT_OPTIONS: Options = {
+  multiple: true,
+  accept: '*',
+}
+
+/**
+ * Open file dialog with ease.
+ *
+ * @see https://vueuse.org/useFileDialog
+ * @param options
+ */
+export function useFileDialog(options?: Partial<Options>) {
+  const files = ref<FileList | null>(null)
+
+  const openFileDialog = (localOptions?: Partial<Options>) => {
+    const _options: 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()
+  }
+
+  return {
+    files: readonly(files),
+    openFileDialog,
+  }
+}
+
+export type UseFileDialogReturn = ReturnType<typeof useFileDialog>

From 6af3a84d9fce1e121471988718f502f0251e0350 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 8 Feb 2022 22:12:25 +0800
Subject: [PATCH 02/10] Update packages/core/useFileDialog/index.ts

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/core/useFileDialog/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index 44b126499df..a0d7ab41876 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -1,6 +1,6 @@
 import { readonly, ref } from 'vue-demi'
 
-export interface Options {
+export interface UseFileDialogOptions {
   multiple?: boolean
   accept?: string
 }

From ecaebd239cf5df1f1712a1d591c7aa82e1075969 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Tue, 8 Feb 2022 22:12:34 +0800
Subject: [PATCH 03/10] Update packages/core/useFileDialog/index.ts

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/core/useFileDialog/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index a0d7ab41876..11a5b043396 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -40,7 +40,7 @@ export function useFileDialog(options?: Partial<Options>) {
 
   return {
     files: readonly(files),
-    openFileDialog,
+    open,
   }
 }
 

From d0f8e5d4afbeccb87f24db9217331c4bec2ea378 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 9 Feb 2022 08:07:33 +0800
Subject: [PATCH 04/10] feat: add reset function

---
 packages/core/useFileDialog/index.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index 11a5b043396..3bb693432be 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -5,7 +5,7 @@ export interface UseFileDialogOptions {
   accept?: string
 }
 
-const DEFAULT_OPTIONS: Options = {
+const DEFAULT_OPTIONS: UseFileDialogOptions = {
   multiple: true,
   accept: '*',
 }
@@ -16,11 +16,11 @@ const DEFAULT_OPTIONS: Options = {
  * @see https://vueuse.org/useFileDialog
  * @param options
  */
-export function useFileDialog(options?: Partial<Options>) {
+export function useFileDialog(options?: Partial<UseFileDialogOptions>) {
   const files = ref<FileList | null>(null)
 
-  const openFileDialog = (localOptions?: Partial<Options>) => {
-    const _options: Options = {
+  const open = (localOptions?: Partial<UseFileDialogOptions>) => {
+    const _options = {
       ...DEFAULT_OPTIONS,
       ...options,
       ...localOptions,
@@ -38,9 +38,14 @@ export function useFileDialog(options?: Partial<Options>) {
     input.click()
   }
 
+  const reset = () => {
+    files.value = null
+  }
+
   return {
     files: readonly(files),
     open,
+    reset,
   }
 }
 

From e989f28c63d14230a192a7e2763564e359dbf2a1 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 9 Feb 2022 21:48:15 +0800
Subject: [PATCH 05/10] fix: update demo imports

---
 packages/core/useFileDialog/demo.vue | 4 ++--
 packages/core/useFileDialog/index.md | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/useFileDialog/demo.vue b/packages/core/useFileDialog/demo.vue
index f0a0d51fb4e..57ce4bac6f7 100644
--- a/packages/core/useFileDialog/demo.vue
+++ b/packages/core/useFileDialog/demo.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useFileDialog } from '.'
 
-const { files, openFileDialog } = useFileDialog()
+const { files, open } = useFileDialog()
 </script>
 
 <template>
   <p>You have selected: {{ files ? files.length : 0 }} files</p>
-  <button type="button" @click="openFileDialog">
+  <button type="button" @click="open">
     Choose file
   </button>
 </template>
diff --git a/packages/core/useFileDialog/index.md b/packages/core/useFileDialog/index.md
index f3c42f37d8e..904885ac3d4 100644
--- a/packages/core/useFileDialog/index.md
+++ b/packages/core/useFileDialog/index.md
@@ -11,11 +11,11 @@ Open file dialog with ease.
 ```ts
 import { useFileDialog } from '@vueuse/core'
 
-const { files, openFileDialog } = useDialog()
+const { files, open, reset } = useDialog()
 ```
 
 ```html
 <template>
-  <button type="button" @click="openFileDialog">Choose file</button>
+  <button type="button" @click="open">Choose file</button>
 </template>
 ```

From 54ab6be8af92d54b3a0176995fb0a13abcef5b7e Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 9 Feb 2022 21:49:51 +0800
Subject: [PATCH 06/10] move input create element outside open function

---
 packages/core/useFileDialog/index.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index 3bb693432be..a6ebde2a683 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -19,22 +19,23 @@ const DEFAULT_OPTIONS: UseFileDialogOptions = {
 export function useFileDialog(options?: Partial<UseFileDialogOptions>) {
   const files = ref<FileList | null>(null)
 
+  const input = document.createElement('input')
+  input.type = 'file'
+
+  input.onchange = (event: Event) => {
+    const result = event.target as HTMLInputElement
+    files.value = result.files
+  }
+
   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()
   }
 

From 7320ce751b76399919d682aae66a30218dd6d500 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Thu, 10 Feb 2022 08:59:17 +0800
Subject: [PATCH 07/10] feat: add capture option to useFileDialog

---
 packages/core/useFileDialog/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index a6ebde2a683..66fd3933e8f 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -3,6 +3,7 @@ import { readonly, ref } from 'vue-demi'
 export interface UseFileDialogOptions {
   multiple?: boolean
   accept?: string
+  capture?: 'user' | 'environment'
 }
 
 const DEFAULT_OPTIONS: UseFileDialogOptions = {
@@ -35,6 +36,7 @@ export function useFileDialog(options?: Partial<UseFileDialogOptions>) {
     }
     input.multiple = _options.multiple!
     input.accept = _options.accept!
+    input.capture = _options.capture!
 
     input.click()
   }

From d3cdc3880f87523ca36592da53caae1a7b2ca47e Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Thu, 10 Feb 2022 09:00:29 +0800
Subject: [PATCH 08/10] add docs to capture option

---
 packages/core/useFileDialog/index.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index 66fd3933e8f..0c0dfc94ecb 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -3,6 +3,10 @@ import { readonly, ref } from 'vue-demi'
 export interface UseFileDialogOptions {
   multiple?: boolean
   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?: 'user' | 'environment'
 }
 

From 3a79223369e65a4fcca5d5f0ec3ab42072b88554 Mon Sep 17 00:00:00 2001
From: Jelf <353742991@qq.com>
Date: Thu, 10 Feb 2022 09:45:32 +0800
Subject: [PATCH 09/10] chore: types

`capture` has more optional values
---
 packages/core/useFileDialog/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index 0c0dfc94ecb..8d80df9d50b 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -7,7 +7,7 @@ export interface UseFileDialogOptions {
    * Select the input source for the capture file.
    * @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
    */
-  capture?: 'user' | 'environment'
+  capture?: string
 }
 
 const DEFAULT_OPTIONS: UseFileDialogOptions = {

From 58da66e2b1aebc18c7337ff8e63f60d831edf20d Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 7 Jul 2022 02:31:07 +0800
Subject: [PATCH 10/10] chore: update

---
 packages/contributors.json           |  2 +-
 packages/core/useFileDialog/demo.vue | 16 ++++++++++++----
 packages/core/useFileDialog/index.ts |  6 ++++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/contributors.json b/packages/contributors.json
index 8f52dc7c89f..8ac4f296d0e 100644
--- a/packages/contributors.json
+++ b/packages/contributors.json
@@ -49,6 +49,7 @@
   "danielroe",
   "darrylnoakes",
   "dblazhkun",
+  "dfreier",
   "echoeureka",
   "Flamenco",
   "husayt",
@@ -115,7 +116,6 @@
   "damienroche",
   "danmindru",
   "DesselBane",
-  "dfreier",
   "eggsy",
   "posva",
   "Maiquu",
diff --git a/packages/core/useFileDialog/demo.vue b/packages/core/useFileDialog/demo.vue
index 57ce4bac6f7..4f18756eb47 100644
--- a/packages/core/useFileDialog/demo.vue
+++ b/packages/core/useFileDialog/demo.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import { useFileDialog } from '.'
 
-const { files, open } = useFileDialog()
+const { files, open, reset } = useFileDialog()
 </script>
 
 <template>
-  <p>You have selected: {{ files ? files.length : 0 }} files</p>
-  <button type="button" @click="open">
-    Choose file
+  <button type="button" @click="open()">
+    Choose files
   </button>
+  <button type="button" :disabled="!files" @click="reset()">
+    Reset
+  </button>
+  <template v-if="files">
+    <p>You have selected: <b>{{ files.length }} files</b></p>
+    <li v-for="file of files" :key="file.name">
+      {{ file.name }}
+    </li>
+  </template>
 </template>
diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index 8d80df9d50b..ffd6a0df304 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -1,7 +1,13 @@
 import { readonly, ref } from 'vue-demi'
 
 export interface UseFileDialogOptions {
+  /**
+   * @default true
+   */
   multiple?: boolean
+  /**
+   * @default '*'
+   */
   accept?: string
   /**
    * Select the input source for the capture file.