File Buttons
Allows you to select files with a single click.
import { FileButton } from '@skeletonlabs/skeleton';
Demo
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.
let files: FileList;
<FileButton ... bind:files={files} />
On Change Event
Use the on:change
event to monitor file selection or changes.
function onChangeHandler(e: Event): void {
console.log('file data:', e);
}
<FileButton ... on:change={onChangeHandler}>Upload</FileButton>