createFileDialog

<script>
	import { createFileDialog } from '@sv-use/core';
 
	const dialog = createFileDialog();
</script>

<script>
	import { createFileDialog } from '@sv-use/core';
 
	const dialog = createFileDialog({
		accept: 'image/*',
		multiple: true,
		onChange(files) {
			console.log($state.snapshot(files));
		},
		onCancel() {
			console.log('cancelled');
		}
	});
</script>
 
<button onclick={dialog.open}>
    Open file dialog
</button>
<button
    onclick={dialog.reset}
    disabled={dialog.files.length === 0}
>
    Reset
</button>
<div class="flex flex-col gap-5">
    <span>Selected Files ({dialog.files.length})</span>
    {#if dialog.files}
        <ul>
            {#each dialog.files as file (file.name)}
                <li>{file.name}</li>
            {/each}
        </ul>
    {:else}
        <p>No files detected</p>
    {/if}
</div>

import type { CleanupFunction } from '../__internal__/types.js';
type CreateFileDialogOptions = {
    /**
     * Whether to automatically clean up the event listeners or not.
     * @note If set to `true`, you must call `createFileDialog` in the component initialization lifecycle.
     * @default true
     */
    autoCleanup?: boolean;
    /** @default '*' */
    accept?: string;
    /** @default false */
    multiple?: boolean;
    /**
     * Triggers when the file selection changes.
     * @default () => {}
     */
    onChange?: (files: File[]) => void;
    /**
     * Triggers when the dialog is closed.
     * @default () => {}
     */
    onCancel?: () => void;
};
type CreateFileDialogReturn = {
    /**
     * A list of selected files.
     * @reactive
     */
    readonly files: File[];
    /** Opens the file dialog. */
    open: () => void;
    /** Resets the file dialog. */
    reset: () => void;
    /** Cleans up the input node and the event listeners. */
    cleanup: CleanupFunction;
};
/**
 * Creates a file dialog to interact with programatically.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/create-file-dialog
 */
export declare function createFileDialog(options?: CreateFileDialogOptions): CreateFileDialogReturn;
export {};