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.

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>