createDropZone

<script>
	import { createDropZone } from '@sv-use/core';
 
	let container = $state();
 
	const dropZone = createDropZone(() => container, {
        allowedDataTypes: 'image/*',
        multiple: true,
        onDrop(files: File[] | null) {
            // Called when files are dropped in the drop zone
        }
    });
</script>
 
<div bind:this={container}>
    Drop images here
</div>

import type { CleanupFunction, MaybeGetter } from '../__internal__/types.js';
type CreateDropZoneOptions = {
    /**
     * The allowed data types in the format `xxx/xxx`.
     *
     * Supports `*` and `xxx/*` wildcards.
     * * If set to `*`, it accepts any data type.
     * * If set to `xxx/*`, it accepts any data type that starts with `xxx`.
     * @default '*'
     */
    allowedDataTypes?: MaybeGetter<string> | MaybeGetter<string[]> | ((types: string[]) => boolean);
    /**
     * Whether to allow multiple files to be dropped.
     * @default true
     */
    multiple?: boolean;
    /**
     * Whether to prevent default behavior for unhandled events or not.
     * @default false
     */
    preventDefaultForUnhandled?: boolean;
    onDrop?(files: File[] | null, event: DragEvent): void;
    onEnter?(event: DragEvent): void;
    onLeave?(event: DragEvent): void;
    onOver?(event: DragEvent): void;
};
type CreateDropZoneReturn = {
    readonly isOver: boolean;
    files: File[] | null;
    cleanup: CleanupFunction;
};
/**
 * Creates a zone where files can be dropped.
 * @param target The element that acts as the drop zone.
 * @param options Additional options to customize the behavior.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/create-drop-zone
 */
export declare function createDropZone(target: MaybeGetter<HTMLElement | null | undefined>, options?: CreateDropZoneOptions): CreateDropZoneReturn;
export {};