File Uploader

Input for selecting and uploading file or multiple files

Figma

Up to date

Status

Stable

HTML

Up to date

React

Up to date

Twig

Up to date

Design Usage

A File Uploader is a design system component that allows users to select and upload files from their devices to an application or website.

It typically features a drag-and-drop area or a button for browsing files and may include progress indicators and error handling.

When to Use

To provide the user with a way to upload files (one or many) with UI feedback (validation states).

The drag-and-drop + click‐to-select is a desired experience.

The previews, removals, or validations (type, size, count) are needed before submission.

When Not to Use

For massive uploads or cases needing chunked/resumable flows beyond component scope.