File Dropzone

Allow upload of files with drag and drop.

javascript

import { FileDropzone } from '@brainandbones/skeleton';

Monitor your browser's console when adding files.

↓

Drop files or click to select.

↓

Drop files or click to select.

Files should not exceed 5mb.

Custom message example.

Usage

let files: FileList;

html

<FileDropzone bind:files />

Use the notes property to provide addition information on a second line.

html

<FileDropzone notes="Files should not exceed 5mb." />

Use the default slot to replace the message entirely.

html

<FileDropzone>(message)</FileDropzone>

Prop	Type	Default	Description
files	array	-	Bind this to your form data, represents the "files" data from the input.
accept	string	-	Set the native file accepts attribute.
name	string	-	Set the native input name value.
multiple	boolean	false	Determines whether user can pick more than one file.
notes	string	-	Provided additional notes or information.

Prop	Type	Default	Description
width	string	w-full	Provide styles to set the dropzone width.
height	string	h-24	Provide styles to set the dropzone height.
padding	string	p-4	Provide styles to set the dropzone padding.
color	string	-	Provide styles to set the dropzone text color.

Name	Description
default	Replace the message with custom UI.

Uses input[type='file'] to allow for all native input accessibility.