FileUpload

A file upload component with drag & drop support, file validation, and preview.

import { FileUpload } from "@ninna-ui/forms"

pnpm add @ninna-ui/forms

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the FileUpload component in your application.

import { FileUpload } from "@ninna-ui/forms";

export default function Example() {
  return (
    <FileUpload
      label="Upload files"
      accept="image/*"
      onFilesChange={(files) => console.log(files)}
    />
  );
}

Basic

Basic file upload with drag and drop.

Upload files

Click to upload or drag and drop

Any file type

Drag and drop or click to upload

Image Only

Restrict uploads to image files only.

Upload images

Click to upload or drag and drop

image/*

Only image files (PNG, JPG, GIF) are accepted

Multiple Files

Allow uploading multiple files at once.

Upload documents

Click to upload or drag and drop

.pdf, .doc, .docx

Upload up to 5 documents

Validation

File validation with size limits and rejection handling.

Upload images (max 2MB each)

Click to upload or drag and drop

image/* (max 2 MB)

Only images, max 2MB, up to 3 files

Sizes

FileUpload in different sizes.

Extra Small

Click to upload or drag and drop

Any file type

Small

Click to upload or drag and drop

Any file type

Medium (Default)

Click to upload or drag and drop

Any file type

Large

Click to upload or drag and drop

Any file type

Extra Large

Click to upload or drag and drop

Any file type

Show File List

Control whether to display uploaded files list.

showFileList=true (default)

With file list

Click to upload or drag and drop

Any file type

Upload files to see them listed below

showFileList=false

Without file list

Click to upload or drag and drop

Any file type

Files won't be displayed after upload

Allow Drag

Enable or disable drag and drop functionality.

allowDrag=true (default)

Drag and drop enabled

Click to upload or drag and drop

Any file type

Click to upload or drag and drop

allowDrag=false

Click only

Click to upload

Any file type

Drag and drop is disabled

States

Different states of the file upload.

Normal

Click to upload or drag and drop

Any file type

Disabled

Click to upload or drag and drop

Any file type

Required*

Click to upload or drag and drop

Any file type

Invalid*

Click to upload or drag and drop

Any file type

React Hook Form

FileUpload works with React Hook Form using the Controller pattern.

API Reference

Complete list of props for the FileUpload component.

Props

Prop	Type	Default	Description
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the file upload component
`accept`	`string`	-	Accepted file types (e.g., "image/*", ".pdf")
`multiple`	`boolean`	`false`	Allow multiple file selection
`maxFileSize`	`number`	-	Maximum file size in bytes
`maxFiles`	`number`	`10`	Maximum number of files
`disabled`	`boolean`	`false`	Whether the upload is disabled
`required`	`boolean`	`false`	Whether the field is required
`invalid`	`boolean`	`false`	Whether the upload is in an invalid state
`onFilesChange`	`(files: File[]) => void`	-	Callback when files are selected
`label`	`string`	-	Label for the upload area
`helperText`	`string`	-	Helper text below the upload area
`showFileList`	`boolean`	`true`	Show file list after selection
`allowDrag`	`boolean`	`true`	Allow drag and drop

Accessibility

Keyboard accessible — can be activated with Enter or Space
Uses aria-disabled and aria-invalid for disabled and invalid states
File input is properly labeled for screen readers via aria-label
File list items have accessible remove buttons with descriptive aria-label
Drag and drop zone is keyboard focusable with role="button"