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

PNG, JPG, and GIF allowed.

Monitor your browser's console log when adding files.

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

html

<FileDropzone name="files" />

You can override the default message, as well as optionally provide icon and meta slots.

html

<FileDropzone name="files">
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	<svelte:fragment slot="message">(message)</svelte:fragment>
	<svelte:fragment slot="meta">(meta)</svelte:fragment>
</FileDropzone>

Binding Method

Use a FileList to bind the file data.

typescript

let files: FileList;

html

<FileDropzone ... bind:files />

On Change Event

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>