Svelte Component

File Dropzone

Allow upload of files with drag and drop.

typescript

import { FileDropzone } from '@skeletonlabs/skeleton';

Source Page Source

Usage

Props

Slots

Events

Upload a file or drag and drop

Uses input[type='file'] and allows for all native input features and accessibility. Including multiple, accept, and required.

Customization

Customize the component with the available icon, message, and meta slots.

Upload a file or drag and drop

PNG, JPG, and GIF allowed.

Use a FileList to bind the file data.

typescript

let files: FileList;

html

<FileDropzone ... bind:files={files} />

Use the on:change event to monitor file selection or changes.

typescript

function onChangeHandler(e: Event): void {
	console.log('file data:', e);
}

html

<FileDropzone ... on:change={onChangeHandler}>Upload</FileDropzone>