┌─────────────────────────────────────────────────────────┐
│ │
│ ✅ Success Message (Auto-hides after 3s) │
│ "Upload Successful! Your documents have been │
│ processed and indexed successfully." │
│ │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ 📤 Upload Documents │
│ Upload your documents to create a knowledge base │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ Drag and drop your files here │ │
│ │ or click to browse │ │
│ │ │ │
│ │ [ PDF ] [ TXT ] [ MD ] │ │
│ │ Max 50MB per file │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 📄 3 files selected │
│ ┌─ report.pdf (2.5 MB) ............... ✅ │
│ ├─ notes.txt (0.3 MB) ................ ✅ │
│ └─ guide.md (1.1 MB) ................ ✅ │
│ │
│ ┌────────────────────────────────┐ │
│ │ Uploading... 85% │ Progress bar │
│ └────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────┐ │
│ │ 📤 Upload & Index Documents │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ 💡 Tip: You can upload multiple files at once. │
│ They will be processed together into a │
│ single knowledge base. │
└─────────────────────────────────────────────────────────┘
| Element | Color | Use Case |
|---|---|---|
| Header Background | Blue Gradient (600→700) | Branding & emphasis |
| Header Text | White | Maximum contrast |
| Drag Area - Idle | Gray (50) with border | Neutral state |
| Drag Area - Active | Blue (50) with blue border | Active feedback |
| File List | White with gray hover | Clean, readable |
| Success Message | Green (50) with green border | Positive feedback |
| Error Message | Red (50) with red border | Error feedback |
| Progress Bar | Blue Gradient (600→700) | Tracking |
| Button - Normal | Blue Gradient (600→700) | Call to action |
| Button - Disabled | Gray (400) | Disabled state |
- On Drag Over: Box scales up slightly (scale-105) + blue background
- On Drop: File list appears with smooth slide-in
- Duration: 200ms
- Files appear with fade-in animation
- Each file has a checkmark (✅) for validation status
- Remove button (×) appears on hover
- Smooth width transition from 0% to 100%
- Percentage text updates in real-time
- Duration: 300ms per increment
- Fade-in: 300ms
- Display: 3 seconds
- Fade-out: 300ms (auto)
- Can be manually closed
- Slide-in from right: 300ms
- Display: 6 seconds
- Slide-out to right: 300ms (auto)
- Pulse icon animation (gentle breathing)
- Hover: Gradient deepens + shadow increases
- Click: Slight scale-down feedback
- Loading: Spinner rotation (infinite)
[ Empty drag zone ]
"Drag and drop your files here"
"or click to select files"
[ Disabled upload button ]
[ Drag zone with focus ]
📄 Selected Files:
- report.pdf (2.5 MB) ✅
- notes.txt (0.3 MB) ✅
- guide.md (1.1 MB) ❌ File too large
[ Enabled upload button ]
[ Upload button with spinner ]
"📤 Processing..."
[ Progress bar: 0% → 100% ]
✅ Upload Successful!
"Your documents have been processed and indexed successfully."
[ Auto-disappears after 3 seconds ]
❌ Error
"Invalid file type: document.exe. Supported: PDF, TXT, MD"
[ Auto-disappears after 6 seconds ]
[ Manual close button ]
- Full width upload card (max-w-4xl)
- 3-column layout for features
- Side-by-side file list and buttons
- 90% width with padding
- 2-column layout for features
- Stacked buttons
- Full width with gutters
- Single-column layout
- Touch-friendly buttons (larger tap area)
- Scrollable file list
| Icon | Use | Color |
|---|---|---|
Upload |
Primary action | Blue/White |
FileText |
File representation | Blue |
CheckCircle |
Success/valid state | Green |
AlertCircle |
Error/warning | Red |
X |
Close/remove | Gray |
Loader |
Loading spinner | Blue |
❌ Failed to upload documents
❌ Error
Invalid file type: document.exe. Supported: PDF, TXT, MD
OR
❌ Error
File report.pdf is too large (max 50MB)
OR
❌ Error
File notes.txt is empty
OR
❌ Error
No response from server. Please check if the backend is
running on http://127.0.0.1:8000
-
Lazy Loading
- Models load on first request
- Smooth loading animation
-
Progress Indication
- 0-90%: Simulated progress for smooth UX
- 90-100%: Actual server progress
- Gives users confidence upload is happening
-
Success Celebration
- Green success message
- Confetti-ready (could be added later)
- Auto-dismisses so not intrusive
shadow-lg /* Elevated appearance */rounded-xl /* 12px - modern feel */Header: text-3xl font-bold (24px, bold)
Subheader: text-sm text-blue-100 (14px, light blue)
Label: font-semibold (600 weight)
Body: text-sm (14px regular)
Small text: text-xs text-gray-500 (12px, muted)
Header padding: px-6 py-8 (generous)
Content padding: p-8 (breathing room)
File list: space-y-2 (2px between items)
Drag area: p-12 (spacious)
DocumentUpload
├── Success Message (conditional)
│ ├── CheckCircle icon
│ ├── Title
│ └── Description
├── Main Card
│ ├── Header Section
│ │ ├── Upload icon
│ │ ├── Title
│ │ └── Subtitle
│ └── Content Section
│ ├── Drag & Drop Zone
│ ├── Hidden file input
│ ├── File List (conditional)
│ ├── Progress Bar (conditional)
│ ├── Upload Button
│ └── Info Tip
└── Error Alert (global, from store)
// DocumentUpload Component State
{
dragActive: boolean, // Is dragging over drop zone
files: File[], // Selected files
uploadProgress: number, // 0-100
uploadSuccess: boolean, // Show success message
validationErrors: object // Per-file error messages
}
// App Store (global)
{
isLoading: boolean, // Upload in progress
error: string, // Current error message
indexId: string, // Session ID after upload
setLoading: fn,
setError: fn,
setIndexId: fn
}- Semantic HTML (proper form elements)
- ARIA labels for icons
- Keyboard navigation support
- High contrast text (WCAG AA compliant)
- Focus indicators on buttons
- Error messages linked to inputs
- File input keyboard accessible
- Drag-and-drop folder support
- Thumbnail preview for images
- File type filtering
- Batch operation progress
- Upload history
- Pause/Resume functionality
- Connection status indicator
- Upload speed indicator (MB/s)
- Estimated time remaining
- Document preview after upload
1. User drags 3 PDF files
2. Sees file list with checkmarks
3. Clicks "Upload & Index"
4. Progress bar fills
5. Success message appears
6. Auto-disappears after 3s
✅ User can now query the documents
1. User tries to upload .exe file
2. Sees error: "Invalid file type"
3. File shows ❌ with error message
4. Upload button disabled
5. User removes invalid file
6. Upload button re-enables
✅ Upload succeeds with valid files
1. Backend server offline
2. User clicks upload
3. After 120s timeout, sees error
4. Message: "Cannot reach http://127.0.0.1:8000"
5. User starts backend server
6. Error auto-hides after 6s
7. User can retry upload
✅ Clear guidance on what's wrong
1. User tries to upload 100MB file
2. Sees error: "File too large (max 50MB)"
3. File shows ❌ with size info
4. User sees actual file size (95 MB)
5. Can replace with smaller file
✅ Clear feedback on constraints
Enjoy your beautiful new upload interface! 🎉