Svelte Component

File Buttons

Allows you to select files with a single click.

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

Demo

Monitor your browser's console when adding files.

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.

Usage with Button Groups

Button Groups expect the child button elements to be native button elements without styles.

Binding Method

Use a FileList to bind the file data.

typescript
let files: FileList;
html
<FileButton ... bind:files={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
<FileButton ... on:change={onChangeHandler}>Upload</FileButton>