FileInput

A standalone file picker with optional drag-and-drop, validation limits, and presentational drop-zone content.

Drop files here or browse Images or PDFs, up to 4 files

Usage

Use standalone, or inside FileField.

Svelte

<FileInput {...props}>Drop files</FileInput>

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte

<div class="whole">
  <div class="aux" conditional>{aux}</div>
  <label class="middle" data-dragover>
    <input class="main" {...rest} type="file" style="sr-only" aria-invalid aria-errormessage />
    {children}
  </label>
  <div class="aux" conditional>{aux}</div>
</div>

Drag-over renders the local variant as active. children must be presentational; place interactive remove or clear controls in aux. accept is re-checked by the primitive because drag-and-drop bypasses the native picker filter.

Props

Name	Type	Default	Description
`children*`	`Snippet`	-	Required presentational content for the drop zone; receives files, drag-over state, and variant
`files`	`File[]`	-	Bindable selected files
`multiple`	`boolean`	`false`	Allows selecting more than one file
`accept`	`string`	-	Accepted file types for committed files
`maxSize`	`number`	-	Maximum file size in bytes
`maxFiles`	`number`	-	Maximum number of committed files
`droppable`	`boolean`	`false`	Enables drag-and-drop on the drop zone
`rejectBy`	`<enum>[]`	-	Bindable list of reject reasons from the most recent add attempt
`flip`	`boolean`	`false`	Renders `aux` before the drop zone instead of after it
`aux`	`Snippet`	-	External snippet for interactive controls such as remove buttons
`events`	`FileInputEvents`	-	Functions that can filter which added or removed files are committed
`attach`	`Attachment`	-	Svelte attachment on the input
`element`	`HTMLInputElement`	-	Bindable input element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Variant

* required. Other HTMLInputAttributes are passed to <input> via rest props; class is merged onto the control.

Input attributes such as disabled, required, and name are passed at the top level.

Styling

To learn more, see Styling.

Variant Management

During drag-over, the local variant is forced to active. Otherwise there is no automatic switching.

Default Class Name

svs-file-input

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Input (main <input type="file">): aria-describedby, aria-invalid, and aria-errormessage from the field-validation wiring and current error-message id.

Provide an accessible name yourself because there is no built-in visible label. Pass aria-label or aria-labelledby through the rest props, or associate a <label> with the file input.

Standards Basis

FileInput is built on a native <input type="file">, so keyboard and assistive-technology support follows the browser standard for file inputs. See the Concepts standards-first guidance for the library's approach. Drag-and-drop is a pointer enhancement over the always-present native control.

Exports

Types

TypeScript

interface FileInputEvents extends Omit<CollectionEvents<File>, "onadd"> {
  onadd?: (detail: { values: File[]; added: File[]; rejected: FileRejection[] }) => File[] | void;
}
interface FileRejection {
  file: File;
  reason: FileRejectReason;
}
type FileRejectReason = "accept" | "maxSize" | "maxFiles";
interface FileInputProps extends Omit<HTMLInputAttributes, "type" | "value" | "files" | "size" | "multiple" | "accept" | "children"> {
  children: Snippet<[File[], boolean, string]>; // required; Snippet<[files,dragover,variant]>; zone content, presentational only
  files?: File[]; // bindable
  multiple?: boolean; // (false)
  accept?: string;
  maxSize?: number; // bytes
  maxFiles?: number;
  droppable?: boolean; // (false)
  rejectBy?: ("accept" | "maxSize" | "maxFiles")[]; // bindable
  flip?: boolean; // (false) - render aux before the zone instead of after
  aux?: Snippet<[File[], (file: File) => void, string]>; // Snippet<[files,remove,variant]>; rendered outside the label
  events?: FileInputEvents;
  attach?: Attachment<HTMLInputElement>;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
  // class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
}
type FileInputReqdProps = "children";
type FileInputBindProps = "files" | "rejectBy" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Drop files here or browse Images or PDFs, up to 4 files

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like