Components / Input controls

File Input

Component + manager

Allows users to select or drop files; optionally multiple, with drag-and-drop area and custom validation.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentFileInput

Managercreate_file_input_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { FileInput, create_file_input_manager } from "sveltekit-ui"

  let file_name = $state("")

  const manager = create_file_input_manager({
    label: "Choose a document",
    accept: ["application/pdf", "text/plain"],
    is_multiselect: false,
    on_get_file: (file) => { file_name = file.name },
    on_clear_files: () => { file_name = "" },
  })
</script>

<FileInput {manager} />
{#if file_name}<p role="status">Selected: {file_name}</p>{/if}

API reference

Configure the manager, call its methods, and read its reactive state.

21 entries in configuration

Property	Type	Default	Description
`val`	`any`	`null`	the current file or array of files selected
`label`	`string`	`null`	label for the file input
`name`	`string`	`file`	the name attribute for the underlying file input element
`is_required`	`boolean`	`false`	marks the input as required
`is_read_only`	`boolean`	`false`	makes the file input read-only if true
`accept`	`array`	`["image/png","image/jpeg","image/webp","image/gif","image/avif","image/svg+xml","application/pdf","video/mp4","audio/mpeg","audio/aac","application/json"]`	the accepted file types
`is_multiselect`	`boolean`	`false`	if true, the file input accepts multiple files
`is_disabled`	`boolean`	`false`	disables file input if true
`border_radius`	`number`	`2`	border radius in rem for the drop zone
`height`	`string`	`null`	height (e.g., '200px') of the drop zone; if null, auto-sizes
`icon_color`	`string`	`var(--primary-t)`	color for the drop zone icon
`border_color`	`string`	`aabbccff`	hex color used for the dashed border
`is_drop_zone`	`boolean`	`true`	if true, enables drag-and-drop area
`is_hide_drop_zone_if_file`	`boolean`	`true`	if true and a file is already selected, hides the drop zone
`ml`	`number`	`0`	margin-left in rem
`mr`	`number`	`0`	margin-right in rem
`mt`	`number`	`0`	margin-top in rem
`mb`	`number`	`0`	margin-bottom in rem
`select_file_button_text`	`string`	`null`	custom text for the 'select file' button
`on_get_file`	`function`	`null`	callback when a file is selected or dropped; receives val
`on_clear_files`	`function`	`null`	callback when files are cleared by the user