All projects · UI Components & Interactions
FileGuard — Smart File Validator
A polished client-side file upload validator that checks each dropped or browsed file against type and size rules in real time, then splits the…
A polished client-side file upload validator that checks each dropped or browsed file against type and size rules in real time, then splits the queue into clearly separated Accepted and Rejected sections with per-file reasons. Users can remove files, clear the queue, and submit only the valid ones.
- Drag-and-drop plus browse upload with live drag state
- Type + MIME + 5 MB size validation with specific rejection reasons
- Accepted/Rejected split view with running counts
- Duplicate detection and dynamic submit-button state
Built with: Vanilla JavaScript, HTML5 File API, Drag-and-drop API, CSS custom properties, Google Fonts (Sora/Outfit), Inline SVG icons