FileInput

A regular file input matching the theme of the kit. Comes with buttons to select and deselect files.

For a larger, more functional and visual file uploader, check out the FileDropzone. It also supports drag'n'drop file upload.

Related Components
FileDropzone
FileTile
Showcase
Source 
<script>
  let upload = null;
</script>

<FileInput bind:value={upload} />
{#if upload != null}
  <FileTile file={upload} />
{/if}

Properties #

Style Properties

Name
Default
Type
Description
vertical false boolean Decides if the select a file and clear selection buttons will be laid out in a row or a column (upload a file to see the two buttons).

Functional Properties

Name
Default
Type
Description
multiple false boolean Allows the user to select multiple files.
value null or [] File or FileList The user's selection. If multiple is false, the value is an actual File object, not a one-element FileList, as opposed to the native <input type="file">.
disabled false boolean Whether the input should accept files.
... any Everything else will be passed to the underlying <input> element.

Class Properties

All <FileInput> components use the .file-input class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.
labelClass null string A class string to add to the <label> element wrapping the <input>.

Events #

Name
Event Detail
Description
change { value, nativeEvent } Fired when a selection is made or cleared. In case of clearing the selection, the nativeEvent is a click event.

Slots #

select-file-message slot

Use this slot to translate the "select file" message that appears when tabbing into the dropdown of options.

Default slot

The label of the main upload button. Defaults to the text "select a file" / "select files" depending on the value of the multiple property.

SCSS Variables #

Name
Description
Default
$main The color of the main upload button.
#4300B0
$font The font of the button text. 'Ubuntu'
$button-radius The curvature radius of a button. 1.5625em
$danger The color of the clearing button.
#B80000
$disabled The color of the main upload button when the input is disabled.
#888888
$bold-font-weight The bold font weight of the buttons. 500
$danger From Button The color of the "clear selection" buttons.
#B80000