f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1.9 KiB
1.9 KiB
category
| category |
|---|
| Browser |
useFileDialog
Open file dialog with ease.
Usage
<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'
const { files, open, reset, onCancel, onChange } = useFileDialog({
accept: 'image/*', // Set to accept only image files
directory: true, // Select directories instead of files if set true
})
onChange((files) => {
/** do something with files */
})
onCancel(() => {
/** do something on cancel */
})
</script>
<template>
<button type="button" @click="open">
Choose file
</button>
</template>
Type Declarations
export interface UseFileDialogOptions extends ConfigurableDocument {
/**
* @default true
*/
multiple?: MaybeRef<boolean>
/**
* @default '*'
*/
accept?: MaybeRef<string>
/**
* Select the input source for the capture file.
* @see [HTMLInputElement Capture](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
*/
capture?: MaybeRef<string>
/**
* Reset when open file dialog.
* @default false
*/
reset?: MaybeRef<boolean>
/**
* Select directories instead of files.
* @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
* @default false
*/
directory?: MaybeRef<boolean>
/**
* Initial files to set.
* @default null
*/
initialFiles?: Array<File> | FileList
/**
* The input element to use for file dialog.
* @default document.createElement('input')
*/
input?: MaybeElementRef<HTMLInputElement>
}
export interface UseFileDialogReturn {
files: Ref<FileList | null>
open: (localOptions?: Partial<UseFileDialogOptions>) => void
reset: () => void
onChange: EventHookOn<FileList | null>
onCancel: EventHookOn
}
/**
* Open file dialog with ease.
*
* @see https://vueuse.org/useFileDialog
* @param options
*/
export declare function useFileDialog(
options?: UseFileDialogOptions,
): UseFileDialogReturn