FileUpload

The main container component that provides context for all file upload components. It manages the file state, validation, and provides all necessary context to child components.

FileUploadDropzone

A container that handles drag and drop functionality. It provides visual feedback during drag operations and automatically handles file drops.

FileUploadTrigger

A button component that triggers the file selection dialog. It automatically handles the hidden file input and can be customized with any button props.

FileUploadInput

The actual HTML file input element. Usually hidden and triggered by FileUploadTrigger. Handles the file selection and validation.

FileUploadList

Displays the list of selected files with Next.js Image optimization for previews. Supports both list and grid views with sorting and filtering capabilities.

FileUploadItem

Individual file item component with Next.js Image preview, file information, and remove functionality. Automatically handles image previews and file type icons.

FileUploadProgress

Displays upload progress with a progress bar and percentage. Shows additional information like chunk size and upload status.

FileUploadError

Displays validation errors and upload errors in a dismissible format. Shows file-specific errors with detailed error messages.

FileUploadToolbar

Advanced toolbar with view toggle (list/grid), sorting options, file type filtering, and image compression controls. All features can be individually enabled or disabled.

FileUploadGallery

Grid view for image files with Next.js Image optimization. Shows image previews in a responsive grid with hover effects and remove functionality.

useFileUpload Hook

Custom hook to access the file upload context. Provides all state and methods for managing files, validation, and UI state.

Complete Example

A comprehensive example showing all components working together with custom validation and upload handling.

Key Features

Browser Support

The file upload component supports all modern browsers with the following features: