Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

FileUpload

Choose or drop attachments with validation, upload progress and recovery actions.

CoreAdvanced Inputs@gaudi/design-system/core/FileUploadView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import FileUpload from '@gaudi/design-system/core/FileUpload';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/file-upload-avatar.json.

Usage

import FileUpload from '@gaudi/design-system/core/FileUpload';
<FileUpload label='Attachments' files={files} onFilesChange={setFiles} multiple  accept='image/*,application/pdf' getFileState={getUploadState} onRetry={retryUpload} onCancel={cancelUpload} />

Examples

Profile photo picker

Storybook
Storybook

Drag and drop

Storybook

Upload table with progress

Storybook
Storybook

API

11 props

Accessibility

The native file input remains keyboard accessible. Announce rejection reasons and retain valid files.

Notes

  • Selecting files does not upload them. The application owns storage, network requests and cancellation.
BannerBanner renders a compact announcement strip.5 examplesTableSemantic article tables with contained horizontal scrolling.7 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesProgressDeterminate and indeterminate progress with a readable task label.4 examplesSortableReorder lists and grids with drag handles, keyboard controls and cancellation.4 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examples