FileDropzone

A large, prominent area for uploading files either by clicking or by dragging them into the area.
Allows uploading files in several takes (that is, the value of the input isn't cleared every time a new selection is made).

For a simpler file input without the built-in representation of the file selection, check out the FileInput.

Showcase

Only images below (3 max.):

Source
<FileDropzone />
<p>Only images below (3 max.):</p>
<FileDropzone accept="image/*" max={3} />

Properties #

Functional Properties

Name
Default
Type
Description
accept null string Limits the allowed files to particular types. For guidelines on the value of the attribute, consult the MDN docs.
files [] Array The user's selection as an array of File objects. Note: this is an actual Array, not a FileList, as opposed to the native <input type="file">.
beforeChange null Function A callback to call for each file that passes the accept check before it is added to the files.
If it returns a Promise, they will be started for every file, but awaited at the end.
disabled false boolean Whether the input should accept files.
max Infinity number The maximum amount of files that the user can upload.
fileComponent FileTile Svelte component The component used to render a selected file.
Receives a single prop: file, the File object.
Expected to dispatch delete events on to delete this file from the selection with the file prop as the detail.
... any Everything else will be passed to the underlying <input> element.

Class Properties

All <FileDropzone> components use the .file-dropzone class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.

Events #

Name
Event Detail
Description
change { value, nativeEvent } Fired when a selection is added to/removed from. In case of removal, the nativeEvent isn't present in the event detail.

Slots #

empty-layer slot

The inner content of the dropzone when no files are selected. Defaults to a message that responds to the state of the dropzone: empty, with files ready to be dropped, with incorrect files ready to be dropped or disabled.

Prop Name
Type
Description
dragActive boolean The state of having a file dragged over the dropzone.
wrongType boolean The state of having an incorrect file dragged over the dropzone.

plus-icon slot

The plus icon inside the dropzone when there are files inside. Bonus: if supplied with a plus class, rotates 45 degrees to become an X when an incorrect file is uploaded. Defaults to Feather icons' Plus.

upload-unavailable-message slot

The text to display when the dropzone is disabled. Defaults to "upload unavailable".

incorrect-file-message slot

The text to display when the file being dropped is of an incorrect type. Defaults to "incorrect file type".

release-to-upload-message slot

The text to display when a file is of the correct file is dragged over the dropzone. Defaults to "release to upload".

drag-and-drop-message slot

The default message to display when the dropzone is enabled but nothing is being dragged over it. Defaults to "drag & drop here or click to upload files".

SCSS Variables #

Name
Description
Default
$main The color of the text and borders.
#4300B0
$font The font of the button text. 'Ubuntu'
$dropzone-radius The curvature radius of a button. 1.5625em
$danger The color of the "incorrect files uploaded" state of the dropzone.
#B80000
$disabled The color of the disabled state of the dropzone.
#888888
$bold-font-weight The bold font weight of the text in the empty layer. 500
$dark From FileTile The text color of the file tiles.
#333333
$file-tile-radius From FileTile The curvature radius of the file tiles. .625em
$shadow-1 From FileTile The shadow of the file tiles.
hover me
0 2px 5px rgba(0, 0, 0, .14), 0 1px 5px rgba(0, 0, 0, .12);
$thin-font-weight From FileTile The thinner font weight for the file details: size and type. 300
$button-radius From Button The curvature radius of the "delete" button. 1.5625em
$danger From Button The color of the "delete" button.
#B80000