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 @@
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
open: (localOptions?: Partial) => void
reset: () => void
+ onChange: EventHookOn
}
/**
@@ -42,7 +44,7 @@ export function useFileDialog(options: UseFileDialogOptions = {}): UseFileDialog
} = options
const files = ref(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,
}
}