File Buttons

Svelte Component

Allows you to select files with a single click.

Import

Package

Source

Doc

Usage

Props

Slots

Events

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.

html

<FileButton name="files">Upload File</FileButton>

Binding Method

Use a FileList to bind the file data.

typescript

let files: FileList;

html

<FileButton ... bind:files />

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

html

<FileButton ... button="variant-filled-primary">Upload</FileButton>

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>