From 5e697ba62791dd57aecd74ff4094d17daffc50db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=B6=E8=BF=9C=E6=96=B9?= <yangpanteng@gmail.com>
Date: Thu, 23 Mar 2023 16:45:19 +0800
Subject: [PATCH] feat(useFileDialog): add listener for file change events
 (#2893)

---
 packages/core/useFileDialog/demo.vue | 5 ++++-
 packages/core/useFileDialog/index.md | 6 +++++-
 packages/core/useFileDialog/index.ts | 8 ++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/core/useFileDialog/demo.vue b/packages/core/useFileDialog/demo.vue
index 4f18756eb47..91727d77536 100644
--- a/packages/core/useFileDialog/demo.vue
+++ b/packages/core/useFileDialog/demo.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useFileDialog } from '.'
 
-const { files, open, reset } = useFileDialog()
+const { files, open, reset, onChange } = useFileDialog()
+onChange((files) => {
+  /** do something with files */
+})
 </script>
 
 <template>
diff --git a/packages/core/useFileDialog/index.md b/packages/core/useFileDialog/index.md
index 67b1ae210c9..1f73898ac2f 100644
--- a/packages/core/useFileDialog/index.md
+++ b/packages/core/useFileDialog/index.md
@@ -11,7 +11,11 @@ Open file dialog with ease.
 ```ts
 import { useFileDialog } from '@vueuse/core'
 
-const { files, open, reset } = useFileDialog()
+const { files, open, reset, onChange } = useFileDialog()
+
+onChange((files) => {
+  /** do something with files */
+})
 ```
 
 ```html
diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts
index c8a8d467c39..b62861c9285 100644
--- a/packages/core/useFileDialog/index.ts
+++ b/packages/core/useFileDialog/index.ts
@@ -1,4 +1,5 @@
-import { hasOwn } from '@vueuse/shared'
+import type { EventHookOn } from '@vueuse/shared'
+import { createEventHook, hasOwn } from '@vueuse/shared'
 import { type Ref, readonly, ref } from 'vue-demi'
 import type { ConfigurableDocument } from '../_configurable'
 import { defaultDocument } from '../_configurable'
@@ -28,6 +29,7 @@ export interface UseFileDialogReturn {
   files: Ref<FileList | null>
   open: (localOptions?: Partial<UseFileDialogOptions>) => void
   reset: () => void
+  onChange: EventHookOn<FileList | null>
 }
 
 /**
@@ -42,7 +44,7 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
   } = options
 
   const files = ref<FileList | null>(null)
-
+  const { on: onChange, trigger } = createEventHook()
   let input: HTMLInputElement | undefined
   if (document) {
     input = document.createElement('input')
@@ -51,6 +53,7 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     input.onchange = (event: Event) => {
       const result = event.target as HTMLInputElement
       files.value = result.files
+      trigger(files.value)
     }
   }
 
@@ -80,5 +83,6 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
     files: readonly(files),
     open,
     reset,
+    onChange,
   }
 }