File upload

The File Upload component allows users to add, preview, and manage documents or files within CogniSync. It supports both single and grouped uploads and is optimized for legal, compliance, and rule-based workflows.

Empty

Drop zone

Dashed 8px container, heading + description, file icon control, outlined upload button (Geist 16/14).

Basic

Upload rules

Drag & drop or click to browse

Rows

File states

Default (rename + delete), uploading (progress + cancel), complete (100% + success badge), error (Checkbox error + retry + message).

Uploaded (rename / delete)

Guidance_left_side.docx

245.67 MB

Uploading (0%)

Guidance_left_side.docx

245.67 MB

Complete (100%)

Guidance_left_side.docx

245.67 MB

100%

Error (Checkbox + retry)

Guidance_left_side.docx

245.67 MB

Upload failed, please try again

Group

Multiple files

Header shows Files (n); Upload more files and Remove all files match grouped upload (234:883).

Interactive list

Files (3)

Guidance_left_side.docx

245.67 MB

Upload failed, please try again

Guidance_left_side.docx

245.67 MB

Guidance_left_side.docx

245.67 MB

100%

Use “Upload more files” to append; “Remove all files” clears the list. Retry on an error row sets it back to uploading (wire your upload logic in product).

Structure

Anatomy

Drop zone

400px max width target, dashed #E2E8F0, 8px radius, 16px padding. Top icon in 6px-radius bordered box; primary CTA is outline button with Upload icon.

File row

6px radius, 12×8px padding, #E2E8F0 border (error: #EF4444). Leading icon well; title 14px medium #020617; size 12px #94A3B8.

Progress

12px pill track #F1F5F9, fill #0D65FC; percentage Geist 14 medium #020617.

Complete

16px green #22C55E circle with check (235:3661).

Error

Icon well #FEF2F2; Checkbox in error state + retry control; helper 14px #475569.

Group chrome

16px padded stack; title Files (count); paired outline actions for add-all / remove-all flows.