File Dropzone

Svelte Component

Allow upload of files with drag and drop.

@skeletonlabs/skeleton
Source Code
View Page Source

Examples

Upload a file or drag and drop
Upload a file or drag and drop
PNG, JPG, and GIF allowed.
Monitor your browser's console log when adding files.

Getting Started

Uses input[type='file'] and allows for all native input features and accessibility. Including multiple, accept, and required.

html 
<FileDropzone name="files" />

You can override the default message, as well as optionally provide icon and meta slots.

html 
<FileDropzone name="files">
	<svelte:fragment slot="lead">(icon)</svelte:fragment>
	<svelte:fragment slot="message">(message)</svelte:fragment>
	<svelte:fragment slot="meta">(meta)</svelte:fragment>
</FileDropzone>

Binding Method

Use a FileList to bind the file data.

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