A comprehensive file upload component with drag-and-drop support, preview functionality, validation, and multiple file handling built with Zod integration.
Overview
The File Input component delivers a modern file upload experience with drag-and-drop functionality, visual previews, and comprehensive validation, making it essential for forms requiring file attachments. It supports both single and multiple file uploads with configurable size limits, file type restrictions, and real-time validation feedback. Perfect for creating intuitive upload interfaces that enhance user experience while ensuring data integrity.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/file-input.json
Usage
1"use client"23import { FileInput } from "@/registry/inputs/file-input"45export function Component() {6 return (7 <FileInput8 label="Upload Document"9 name="document"10 accept=".pdf,.docx,.jpg,.png"11 multiple12 maxSize={10 * 1024 * 1024} // 10MB13 hint="Accepted formats: PDF, DOCX, JPG, PNG"14 onFilesSelected={(files) => console.log(files)}15 />16 )17}
API Reference
Props
Prop | Type | Default | Description |
---|---|---|---|
label | string | - | Label for the file input field (required) |
name | string | - | Name of the input field for form submission (required) |
description | string | undefined | Description text below the label |
hint | string | undefined | Hint text below the file input |
error | string | undefined | Error message to display |
required | boolean | false | Whether the field is required |
pending | boolean | false | Whether the field is in a loading state |
accept | string | undefined | Accepted file types (e.g., ".pdf,.jpg,image/*") |
multiple | boolean | false | Whether to accept multiple files |
maxSize | number | undefined | Maximum file size in bytes |
maxFiles | number | 5 | Maximum number of files (when multiple is true) |
disabled | boolean | false | Whether the input is disabled |
id | string | name | ID for the file input element |
variant | "default" | "pill" | "default" | Visual variant of the input |
coloredBorder | boolean | false | Whether to show colored border (pill variant) |
labelVariant | "default" | "muted" | "default" | Label text styling variant |
containerClassName | string | "" | CSS classes for the container |
dropzoneClassName | string | "" | CSS classes for the file drop area |
labelClassName | string | "" | CSS classes for the label |
dropzoneText | string | undefined | Custom text for the dropzone |
showPreviews | boolean | true | Whether to show file previews |
showIcons | boolean | true | Whether to show file type icons |
schema | ZodType<File | File[]> | undefined | Zod schema for validation |
onValidate | (isValid: boolean, files: File | File[], error?: string) => void | undefined | Validation callback |
onFilesSelected | (files: File[]) => void | undefined | Callback when files are selected |
Examples
Pill Variant
Rounded pill variant with muted background styling and colored border.
Multiple Files
Upload multiple files with drag and drop support and configurable limits.
File Previews
Upload files with visual previews for images and type icons for documents.