ComponentsEnterpriseFileUpload

FileUpload

FileUpload collects files through an accessible picker or drag-and-drop zone.

Drag + dropValidation3 variants3 sizesControlled files

Overview

Use FileUpload to collect one or more files when people need clear format, size, count, selection, and rejection feedback.

Security evidence

Live preview

Use the picker to add files and confirm constraints before upload.

  • security-review.pdf21 B
EvidenceUpload.tsx
tsx
import { FileUpload } from 'omverse-ui'
 
<FileUpload
multiple
maxFiles={5}
maxSize={10 * 1024 * 1024}
accept=".pdf,.doc,.docx"
description="PDF or Word, up to 10 MB each. Maximum 5 files."
onFilesChange={setFiles}
onReject={reportRejections}
/>

Anatomy

FileUpload combines a picker and drop target with constraints, accepted file identity, metadata, and removal.

⇧Drop files here or browsePDF or Word, up to 10 MB.
▤security-review.pdf2.4 MB⌫
12345
  1. 1
    Upload visual

    Identifies file collection or current processing.

  2. 2
    Instruction

    Names dropping and browsing as equivalent paths.

  3. 3
    Constraints

    States accepted formats, size, and count before selection.

  4. 4
    Selected file

    Shows file name and useful metadata.

  5. 5
    Remove control

    Removes one file from the controlled collection.

When to use

Use FileUpload when a workflow requires local files and people must review the selected collection before submission.

Recommended

  • Collect evidence or attachments

    Support documents, images, exports, and governed artifacts.

  • Validate before upload

    Reject unsupported type, size, duplicates, and excess count immediately.

  • Show selected identity

    Let people confirm and remove each file before submission.

When not to use

Use another pattern when content already exists remotely or needs specialized capture and editing.

Avoid

  • Do not browse remote assets

    Use a file picker or asset browser for existing repository content.

  • Do not capture camera media implicitly

    Use a dedicated capture flow with permissions and preview.

  • Do not hide upload progress

    Use Progress for long-running transfer and processing stages.

Variants

Drop-zone treatment and size adapt file collection to page-level tasks and compact form regions.

Outlined

Dashed default drop target.

Filled

Tonal drop zone for grouped forms.

Raised

Elevated collection surface.

Sizes

Small, medium, and large scale target and file rows.

States

FileUpload separates selection, validation, and application-owned transfer progress.

StateTriggerVisual responseInteraction
EmptyNo accepted filesInstruction and constraintsBrowse or drop
Drag activeFiles enter targetPrimary border and ringDrop to validate
SelectedFiles pass validationNamed removable rowsAdd or remove
RejectedValidation failsAssertive specific messagesChoose valid files
LoadingUpload or processing activeProgress visual and labelSelection disabled
DisabledCollection unavailableReduced emphasisNot operable

Behavior

FileUpload owns local selection and validation while applications own transfer, persistence, virus scanning, retries, and server policy.

Collection

Picker and drop paths run the same validation pipeline.

Validation

Type, size, count, and duplicate rules produce specific rejections.

Removal

A named action removes one accepted file.

Transfer boundary

Accepted files are returned; network upload remains application-owned.

Accessibility

The drop zone is a real button backed by a native file input; every operation remains available without drag-and-drop.

KeyAction
TabMoves to the drop zone or a remove control.
EnterSpaceOpens the native file picker or removes the focused file.
  • Never require drag-and-drop; retain a keyboard-operable picker.
  • State accepted types, maximum size, and maximum count before selection.
  • Announce rejection messages with the file name and corrective constraint.
  • Give every remove control a label containing the file name.
  • Do not claim upload completion when files are only locally selected.
  • Expose transfer progress separately for long uploads.

Content guidelines

Upload guidance should answer what, how many, and how large before people open the picker.

Name both paths

Treat browse and drop as equivalent.

ExampleDrop files here or browse

List formats

Use recognizable format names.

ExamplePDF or Word documents

State limits

Include per-file size and total count.

ExampleUp to 10 MB each. Maximum 5 files.

Write specific rejection

Name the file and failed rule.

Examplereport.exe is not an accepted file type.

Examples

Controlled files and loading state support application-owned submission and processing.

Processing state

Live preview
  • security-review.pdf21 B
ControlledUpload.tsx
tsx
<FileUpload
files={evidence}
onFilesChange={setEvidence}
loading={mutation.isPending}
required
name="evidence"
/>
ControlledValidation.tsx
tsx
<FileUpload
maxSize={2 * 1024 * 1024}
accept=".pdf"
onReject={(rejections) => console.log(rejections)}
/>

Props / API

FileUpload extends div attributes and exposes accepted files plus typed rejection codes.

Props

PropTypeDefaultDescription
filesreadonly File[]undefinedControlled accepted files.
defaultFilesreadonly File[][]Initial uncontrolled files.
onFilesChange(files) => voidundefinedRuns when accepted files change.
onReject(rejections) => voidundefinedRuns when files fail validation.
acceptstringundefinedNative MIME type or extension accept list.
maxSizenumberundefinedMaximum file size in bytes.
maxFilesnumber1Maximum accepted file count.
multiplebooleanfalseAllows more than one file.
disabledbooleanfalseDisables selection, dropping, and removal.
loadingbooleanfalseShows upload processing state.
labelReactNode'Drop files here or browse'Primary drop-zone instruction.
inputLabelstring'Choose files'Accessible name for the native file picker.
descriptionReactNodeundefinedAccepted format and limit guidance.
variant'outlined' | 'filled' | 'raised''outlined'Controls drop-zone treatment.
size'sm' | 'md' | 'lg''md'Controls drop-zone and file-row scale.