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.
Only images below (3 max.):
<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 |