Svelte Component

File Dropzone

Allow upload of files with drag and drop.

typescript
import { FileDropzone } from '@skeletonlabs/skeleton';
Source Page Source

Demo

Upload a file or drag and drop

Monitor your browser's console when adding files.

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.

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>