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/index.ts b/packages/core/index.ts index bebfc8af531..03b33964cc8 100644 --- a/packages/core/index.ts +++ b/packages/core/index.ts @@ -45,6 +45,7 @@ export * from './useEventSource' export * from './useEyeDropper' export * from './useFavicon' export * from './useFetch' +export * from './useFileDialog' export * from './useFileSystemAccess' export * from './useFocus' export * from './useFocusWithin' diff --git a/packages/core/useFileDialog/demo.vue b/packages/core/useFileDialog/demo.vue new file mode 100644 index 00000000000..4f18756eb47 --- /dev/null +++ b/packages/core/useFileDialog/demo.vue @@ -0,0 +1,20 @@ + + + diff --git a/packages/core/useFileDialog/index.md b/packages/core/useFileDialog/index.md new file mode 100644 index 00000000000..904885ac3d4 --- /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, open, reset } = useDialog() +``` + +```html + +``` diff --git a/packages/core/useFileDialog/index.ts b/packages/core/useFileDialog/index.ts new file mode 100644 index 00000000000..ffd6a0df304 --- /dev/null +++ b/packages/core/useFileDialog/index.ts @@ -0,0 +1,65 @@ +import { readonly, ref } from 'vue-demi' + +export interface UseFileDialogOptions { + /** + * @default true + */ + multiple?: boolean + /** + * @default '*' + */ + 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?: 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) { + const files = ref(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) => { + const _options = { + ...DEFAULT_OPTIONS, + ...options, + ...localOptions, + } + input.multiple = _options.multiple! + input.accept = _options.accept! + input.capture = _options.capture! + + input.click() + } + + const reset = () => { + files.value = null + } + + return { + files: readonly(files), + open, + reset, + } +} + +export type UseFileDialogReturn = ReturnType