createDropZone
Category Elements
Creates a zone where files can be dropped.
Demo
Drop files from your computer on to one of the drop zones.
General Drop Zone Is Over ? false
Files
Image Drop Zone Is Over ? false
Files
Usage
IMPORTANT
Since it uses $effect internally, you must either call createDropZone in
the component initialization lifecycle or call it inside $effect.root.
<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>Type definitions
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/elements/create-drop-zone
*/
export declare function createDropZone(target: MaybeGetter<HTMLElement | null | undefined>, options?: CreateDropZoneOptions): CreateDropZoneReturn;
export {};