← Components/patterns

FileUploader

Carbon-spec file uploader. Three sub-components: FileUploader — wrapper that manages files state FileUploaderButton — button-style trigger (no drop area) FileUploaderDropContainer — drag-drop area (the canonical Carbon look) FileUploaderItem — per-file row showing name, size, status, delete

patternsstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LivebrandtoneOpen all variants in Storybook ↗

Edit JSX — preview updates livereact-live

import { FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem } from "@avala/design";

<FileUploader>
  <FileUploaderButton />
  <FileUploaderDropContainer />
  <FileUploaderItem />
</FileUploader>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

patterns-fileuploader--defaultOpen in Storybook →

When to use

Any uploads UI: dataset import, profile picture, attachment, batch import.
The two trigger flavours cover compact (button) and prominent (drop zone) layouts.

When not to use

Cross-app drop targets / drag handles for non-upload reordering → roll your own; FileUploader is upload-specific.
Inline image picker with paste / clipboard support → wrap an editor primitive yourself.