FileUpload

When to use

Bulk file intake with max size/type validation and user-visible rejection messages.

When NOT to use

Single image avatar crop — use a simpler input. Screen capture — use ScreenCaptureUpload.

Podium primitives composed

• Podium Button
• Podium Text

Props

Auto-generated from src/components/FileUpload/FileUpload.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

FileUploadProps

Prop	Type	Required	Description
className	string	No	—
constraints	FileUploadConstraints	No	File validation rules: accepted MIME/extension types, max file size, max file count, and multi-file toggle.
defaultItems	FileUploadListItem[]	No	Initial rows for uncontrolled usage.
description	ReactNode	No	—
disabled	boolean	No	—
dropzoneDisabledSecondaryText	string	No	—
dropzoneDisabledText	string	No	—
dropzoneDragActiveSecondaryText	string	No	—
dropzoneDragActiveText	string	No	—
dropzoneErrorSecondaryText	string	No	—
dropzoneErrorText	string	No	—
dropzonePrimaryText	string	No	Dropzone copy overrides.
dropzoneSecondaryText	string	No	—
id	string	No	Stable id used to generate aria label and description ids (e.g. {id}-label, {id}-desc).
items	FileUploadListItem[]	No	Controlled list — updates must be driven by the consumer via onItemsChange.
label	ReactNode	Yes	—
onCancel	() => void	No	Consumer-provided action handler wired to the “Cancel” button.
onClear	() => void	No	—
onItemsChange	(items: FileUploadListItem[]) => void	No	—
onProcess	() => void	No	Consumer-provided action handler wired to the “Process Files” button.
onRemove	(info: { id: string; items: FileUploadListItem[] }) => void	No	—
onRetry	(info: { id: string }) => void	No	—
onSelect	(info: { added: FileUploadListItem[]; items: FileUploadListItem[] }) => void	No	Fired after files are validated and added to the list.
onValidationOutcome	(outcome: { accepted: File[]; rejected: FileUploadRejection[] }) => void	No	Detailed accept/reject outcome for every file in the drop/selection.
renderItem	(item: FileUploadListItem, actions: FileUploadItemActions) => ReactNode	No	Full row override; the default row uses Podium primitives.
validationMessage	ReactNode	No	Visible validation / rejection message shown below the dropzone.
visualState	'default' | 'dragActive' | 'error'	No	Force a visual state for deterministic Storybook previews or consumer-driven workflow indicators.

Examples

CSV upload with size limit

import { FileUpload } from '@nike/whisker-component-library';

<FileUpload
  accept={{ 'text/csv': ['.csv'] }}
  maxSize={5 * 1024 * 1024}
  onFilesAccepted={(files) => upload(files)}
/>;

Live playground