Svelte Component

File Buttons

Allows you to select files with a single click.

typescript

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

Source Page Source

Usage

Props

Slots

Events

Uses FileList to bind data to an input[type='file']. Accepts all attributes, including: multiple, accept, and required.

Variant Style

Use the button property to provide classes for the button, such as variant styles.

Use a FileList to bind the file data.

typescript

let files: FileList;

html

<FileButton ... 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

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