🚀ReacUI is currently in Beta. We're actively improving it! ❣️

File Input

A component for file uploads with enhanced styling and functionality

Installation

The FileInput component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the FileInput component into your React component.

import { FileInput } from 'reacui';

Basic Usage

The FileInput component provides a styled file input control.

Upload file

<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Upload file
</label>
<FileInput onChange={(files) => handleFiles(files)} />

Variants

Different styles and variants of the file input component.

Standard (Default)

Button Only

Choose fileNo file selected

Outline

Upload a file

or drag and drop

PNG, JPG, GIF up to 10MB

{/* Standard (Default) */}
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Standard (Default)
</label>
<FileInput variant="standard" onChange={(files) => handleFiles(files)} />

{/* Button Only */}
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Button Only
</label>
<FileInput 
  variant="button" 
  buttonText="Choose file" 
  onChange={(files) => handleFiles(files)} 
/>

{/* Outline */}
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
  Outline
</label>
<FileInput 
  variant="outline" 
  accept="image/png,image/jpeg,image/gif"
  maxSize={10 * 1024 * 1024} // 10MB
  helperText="PNG, JPG, GIF up to 10MB"
  onChange={(files) => handleFiles(files)} 
/>

With Dropzone

Enable drag and drop functionality for file uploads.

Upload files

or drag and drop

Up to 5 files, max 2MB each

<FileInput 
  variant="dropzone"
  multiple
  maxFiles={5}
  maxSize={2 * 1024 * 1024} // 2MB per file
  accept="image/*,application/pdf"
  helperText="Up to 5 files, max 2MB each"
  onChange={(files) => handleFiles(files)} 
  onDrop={(files) => handleDrop(files)}
/>

Validation

File input with validation states and error messages.

Valid file

File meets all requirements

Invalid file

File too large (max 2MB)

<FileInput 
  state="valid"
  helperText="File meets all requirements"
  onChange={(files) => handleFiles(files)} 
/>

<FileInput 
  state="error"
  error="File too large (max 2MB)"
  onChange={(files) => handleFiles(files)} 
/>

API Reference

The following props are available for the FileInput component.

Prop	Type	Default	Description
variant	enum	'standard'	The visual style: 'standard', 'button', 'outline', or 'dropzone'
multiple	boolean	false	Whether multiple files can be selected
accept	string	''	File types that can be accepted (e.g., 'image/*,application/pdf')
maxSize	number	Infinity	Maximum file size in bytes
maxFiles	number	Infinity	Maximum number of files when multiple is true
buttonText	string	'Choose file'	Text for the button in button variant
helperText	string	''	Helper text shown below the input
state	enum	'default'	The validation state: 'default', 'valid', or 'error'
error	string	''	Error message when state is 'error'
disabled	boolean	false	Whether the file input is disabled
onChange	function	-	Callback function triggered when files are selected
onDrop	function	-	Callback function triggered when files are dropped (for dropzone variant)