Components / File Input
File Input
File picker with drag-and-drop, paste-from-clipboard, image thumbnails, file-type-aware icons, mobile camera capture, per-file upload status + progress, bulk clear, and screen-reader live announcements. Three sizes, two visual variants.
forms v0.7.0
Playground
Examples
Multiple documents (md)
<cg-file-input label="Upload documents" accept=".pdf,.doc,.docx" multiple max-size="5242880" helper="Drop 2+ files to see the bulk Clear-all" style="max-width:480px;"></cg-file-input>Image upload with thumbnails
<cg-file-input label="Photos" accept="image/*" multiple max-size="2097152" helper="Live thumbnails appear after drop" style="max-width:480px;"></cg-file-input>Paste from clipboard
<cg-file-input label="Paste anywhere" paste multiple helper="Copy any image then press ⌘V (Ctrl+V on Windows)" style="max-width:480px;"></cg-file-input>Mobile camera capture
<cg-file-input label="Take a photo" accept="image/*" capture="environment" helper="On mobile, opens the camera directly" style="max-width:480px;"></cg-file-input>Upload progress (call setFileStatus)
<cg-file-input id="demo-status" label="Drop a file then watch the progress" multiple style="max-width:480px;"></cg-file-input>Sizes (sm / md / lg)
<div style="display:flex;flex-direction:column;gap:16px;max-width:480px;"><cg-file-input size="sm" placeholder="Small dropzone"></cg-file-input><cg-file-input size="md" placeholder="Medium (default)"></cg-file-input><cg-file-input size="lg" placeholder="Large dropzone — for hero CTAs"></cg-file-input></div>Compact (inline button)
<div style="display:flex;flex-direction:column;gap:12px;align-items:flex-start;"><cg-file-input variant="compact" multiple></cg-file-input><cg-file-input variant="compact" multiple accept="image/*"></cg-file-input></div>Error / disabled
<div style="display:flex;flex-direction:column;gap:12px;max-width:480px;"><cg-file-input label="With error" error helper="Please upload a valid file"></cg-file-input><cg-file-input label="Disabled" disabled></cg-file-input></div>Import
import { CgFileInput } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-file-input';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "" | Label text |
accept | string | "" | Accepted file types |
multiple | boolean | false | Allow multiple files |
max-size | number | 0 | Max file size in bytes (0 = unlimited) |
max-files | number | 0 | Max number of files (0 = unlimited) |
size | "sm" | "md" | "lg" | "md" | Dropzone size |
variant | "dropzone" | "compact" | "dropzone" | Visual style — full dropzone or inline button |
capture | "" | "user" | "environment" | "" | Mobile camera capture (front/rear) |
paste | boolean | false | Accept files pasted from clipboard (Ctrl/Cmd+V) |
error | boolean | false | Error state |
disabled | boolean | false | Disabled state |
Events
| Event | Detail | Description |
|---|---|---|
cg-file-change | {files: File[]} | Files selected |
cg-file-reject | {files: File[], reason: string} | File rejected (size/count) |
cg-file-remove | {file: File} | File removed |
cg-file-clear | {} | All files cleared via bulk action |