File Upload

Advanced file upload component with drag & drop, progress tracking, validation, and preview support

Installation

Install the File Upload component using the nocta-ui CLI:

npx nocta-ui add file-upload

Import the component:

import { FileUpload } from '@/components/ui/file-upload';

Examples

Basic File Upload

Single File Upload

Image Upload with Preview

Sizes

Three size options are available: sm, md, and lg. The default size is md.

Small Size

Medium Size (Default)

Large Size

Component States

Disabled State

File Types & Validation

File Type Restrictions

// Images only
<FileUpload accept="image/*" />

// Specific image types
<FileUpload accept="image/jpeg,image/png,image/gif" />

// Documents
<FileUpload accept=".pdf,.doc,.docx,.txt" />

// Multiple types
<FileUpload accept="image/*,.pdf,.doc,.docx,text/*" />

// All files
<FileUpload accept="*/*" />

File Size Limits

// 1MB limit
<FileUpload maxSize={1024 * 1024} />

// 5MB limit
<FileUpload maxSize={5 * 1024 * 1024} />

// 50MB limit
<FileUpload maxSize={50 * 1024 * 1024} />

File Count Limits

// Single file only
<FileUpload multiple={false} />

// Up to 5 files
<FileUpload multiple maxFiles={5} />

// Up to 20 files
<FileUpload multiple maxFiles={20} />

// Unlimited files
<FileUpload multiple />

API Reference

Prop	Type	Default	Description
`variant`	`'default' \| 'default' \| 'compact'`	`'default'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the upload area
`multiple`	`boolean`	`false`	Allow multiple file selection
`accept`	`string`	-	Accepted file types (MIME types or extensions)
`maxSize`	`number`	-	Maximum file size in bytes
`maxFiles`	`number`	-	Maximum number of files
`disabled`	`boolean`	`false`	Disable the upload component
`files`	`FileUploadFile[]`	`[]`	Array of files
`onFilesChange`	`(files: FileUploadFile[]) => void`	-	Callback when files change
`onUpload`	`(files: FileUploadFile[]) => Promise<void>`	-	Upload function
`showProgress`	`boolean`	`true`	Show upload progress
`showPreview`	`boolean`	`true`	Show image previews
`uploadText`	`string`	`'Click to upload or drag and drop'`	Upload zone text
`dragText`	`string`	`'Drop files here'`	Drag over text
`className`	`string`	-	Additional CSS classes

Small Size

Medium Size (Default)

Large Size

On this page