FileUpload

Drag-and-drop file upload zone with validation, file list, and remove functionality. Built with react-dropzone.

Installation
# Install @opencosmos/ui to use FileUpload
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Label text above the drop zone
— Helper text shown in the drop zone
— Allow multiple file selection
— Disable the upload zone
— Size of the drop zone
Usage
Import
import { FileUpload } from '@opencosmos/ui';
Example
<FileUpload>
  Content
</FileUpload>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
labeltext"Upload files"Label text above the drop zone
descriptiontext"PNG, JPG, PDF up to 10MB"Helper text shown in the drop zone
multiplebooleanfalseAllow multiple file selection
disabledbooleanfalseDisable the upload zone
sizesm | default | lg"default"Size of the drop zone

Accessibility

  • Drop zone has role="button" for keyboard activation
  • Keyboard activatable (Enter/Space to open file dialog)
  • Error messages use role="alert" for screen readers
  • Remove buttons have descriptive aria-labels
  • Visual states for drag-over, error, and disabled

Examples

Default

Upload files

Drag & drop files here, or click to browse

PNG, JPG, PDF up to 10MB

Multiple

Upload images

Drag & drop files here, or click to browse

Select multiple images

Disabled

Upload files

Drag & drop files here, or click to browse

Code Examples

Basic Usage

Simple file upload with label and description

import { FileUpload } from '@opencosmos/ui'

<FileUpload
  label="Upload documents"
  description="PDF, DOC up to 5MB"
  onFilesSelected={(files) => console.log(files)}
/>

With Validation

File upload with type, size, and count validation

import { FileUpload } from '@opencosmos/ui'

<FileUpload
  label="Upload images"
  accept={{ 'image/*': ['.png', '.jpg', '.jpeg'] }}
  maxSize={5 * 1024 * 1024}
  maxFiles={3}
  multiple
  onFilesSelected={(files) => handleUpload(files)}
  onFilesRejected={(rejections) => showErrors(rejections)}
/>