FileInput
The FileInput component provides a user-friendly interface for file uploads with drag-and-drop functionality, file validation, and preview capabilities.
Source
LLM docs
Package
Examples
7
Properties
67
Playground
Basics
Simple file input with helper text and multiple file selection.
Loading demo…
import { Block, FileInput } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<FileInput
label="Upload files"
helperText="Choose files from your device"
multiple
fullWidth
/>
</Block>
);
}Dropzone
Drag-and-drop dropzone variant with native fallback instructions and selected file list.
Loading demo…
import { Block, FileInput } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<FileInput
variant="dropzone"
multiple
helperText="Drag & drop on desktop or tap to browse on mobile"
fullWidth
/>
</Block>
);
}File Type Restrictions
Configure different file inputs with MIME filters, extension lists, and size limits.
Loading demo…
import { Block, FileInput } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<FileInput
label="Images only"
accept={['image/*']}
helperText="Only image files are allowed"
multiple
fullWidth
/>
<FileInput
label="Documents only"
accept={['.pdf', '.doc', '.docx', '.txt']}
helperText="PDF, Word documents, and text files only"
multiple
fullWidth
/>
<FileInput
label="Videos (max 50MB)"
accept={['video/*']}
maxSize={50 * 1024 * 1024}
helperText="Video files up to 50MB"
fullWidth
/>
</Block>
);
}Image Preview
Image upload with preview thumbnails and remove functionality.
Loading demo…
import { Block, FileInput } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<FileInput
label="Upload images"
accept={['image/*']}
helperText="Add images to see inline previews"
multiple
fullWidth
/>
</Block>
);
}Size Variants
Different size variants and customization options.
Loading demo…
import { Block, FileInput } from '@plocks/ui';
const sizes = [
{ label: 'Small', size: 'sm' as const },
{ label: 'Medium (default)', size: 'md' as const },
{ label: 'Large', size: 'lg' as const },
];
export function Demo() {
return (
<Block fullWidth>
{sizes.map(({ label, size }) => (
<FileInput key={size} label={label} size={size} fullWidth />
))}
<FileInput
label="Custom placeholder"
placeholder="Click to select your files"
fullWidth
/>
</Block>
);
}Upload Progress
onUpload and report each file's progress with its onProgress helper.Loading demo…
import { Block, FileInput } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<FileInput
label="Select files to upload"
multiple
fullWidth
onUpload={async (files, { onProgress }) => {
for (const file of files) {
for (let progress = 0; progress <= 100; progress += 25) {
onProgress(file.id, progress);
await new Promise((resolve) => setTimeout(resolve, 300));
}
}
}}
/>
</Block>
);
}Validation & States
File input with various validation rules and states.
Loading demo…
import { Block, FileInput } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<FileInput
label="Upload small files"
helperText="Files must be below 2MB"
maxSize={2 * 1024 * 1024}
multiple
fullWidth
/>
<FileInput
label="Upload up to 3 files"
maxFiles={3}
multiple
fullWidth
/>
<FileInput
label="Required upload"
error="Please select at least one file"
required
fullWidth
/>
<FileInput
label="Disabled upload"
helperText="The uploader is unavailable"
disabled
fullWidth
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources