Phase 3: File Attachments UI Integration

[kevalyq]

🎯 Goal

Integrate file attachment UI into secret management: upload, preview, download, and delete encrypted files with drag-and-drop support.

---

🔗 Parent Epic

Part of: #191 (Secret Management Frontend)

---

📋 Tasks

Attachment Upload Component

• Create AttachmentUpload.tsx component
• Implement drag-and-drop zone
• Add file picker button
• Show upload progress bar
• Display file preview (image thumbnails)
• Add file type validation
• Add file size validation (max 10MB)
• Integrate with existing uploadEncryptedAttachment() API
• Show success/error notifications

Attachment List Component (Enhancement)

• Enhance existing AttachmentList.tsx for secret detail page
• Display attachment metadata (filename, size, type, date)
• Add download button per file
• Add preview button for images/PDFs
• Add delete button (with confirmation)
• Show loading states
• Implement responsive design

Attachment Preview Modal

• Create AttachmentPreview.tsx modal component
• Image preview (with zoom controls)
• PDF preview (using iframe or PDF.js)
• Download button in preview
• Close button
• Keyboard navigation (ESC to close)

Integration with Secret Forms

• Add attachment upload zone to SecretCreate.tsx
• Add attachment management to SecretEdit.tsx
• Show attached files in form
• Allow removing attachments before save
• Handle attachment upload during secret creation

API Service Extensions

• Extend services/secretApi.ts (already has attachment functions)
• Ensure uploadEncryptedAttachment() works correctly
• Ensure listAttachments() works correctly
• Ensure deleteAttachment() works correctly
• Ensure downloadAndDecryptAttachment() works correctly
• Add error handling for file operations

Tests

• Unit tests for attachment API functions
• Component tests for AttachmentUpload.tsx
• Component tests for AttachmentList.tsx
• Component tests for AttachmentPreview.tsx
• Integration test: Upload → List → Download flow
• Integration test: Upload → Delete flow

---

🎨 UI Mockup

Attachment Upload Zone

┌─────────────────────────────────────────────────────────┐
│ Attachments                                             │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📎 Drag files here or click to browse               │ │
│ │                                                       │ │
│ │ Supported: Images, PDFs, Documents (max 10MB)        │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ Uploaded Files:                                         │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 📄 recovery-codes.txt (1.2 KB)  [Preview] [Delete]  │ │
│ │ 📄 backup-email.pdf (245 KB)    [Preview] [Delete]  │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

Attachment Preview Modal

┌─────────────────────────────────────────────────────────┐
│ backup-email.pdf                    [Download] [✕ Close]│
├─────────────────────────────────────────────────────────┤
│                                                         │
│           [PDF Preview or Image Preview]                │
│                                                         │
│                                                         │
│                                                         │
└─────────────────────────────────────────────────────────┘

---

🔗 API Endpoints (Backend)

// Upload attachment (already implemented in frontend)
POST /api/v1/secrets/{secretId}/attachments
Content-Type: multipart/form-data
Body: file (encrypted blob) + metadata (JSON)

Response: 201 Created
{
  "data": {
    "id": "uuid",
    "filename": "recovery-codes.txt",
    "size": 1234,
    "mime_type": "text/plain",
    "created_at": "2025-11-22T10:00:00Z"
  }
}

// List attachments (already implemented)
GET /api/v1/secrets/{secretId}/attachments

// Download attachment (already implemented)
GET /api/v1/attachments/{attachmentId}/download

// Delete attachment (already implemented)
DELETE /api/v1/attachments/{attachmentId}

---

✅ Acceptance Criteria

• Drag-and-drop upload works correctly
• File picker button works
• Upload progress shows during upload
• File type validation (images, PDFs, documents only)
• File size validation (max 10MB)
• Attachment list displays all files
• Download button works
• Preview works for images and PDFs
• Delete button works (with confirmation)
• Attachments integrate with create/edit forms
• All tests pass (≥80% coverage)
• Accessibility: Keyboard navigation
• Accessibility: Screen reader compatible

---

🔒 Security Notes

• ⚠️ All files are encrypted client-side before upload (already implemented)
• ⚠️ Validate file types (block executables)
• ⚠️ Enforce file size limits
• ⚠️ Never log file contents
• ⚠️ Respect backend permissions (403 if no upload permission)

---

📊 Estimated Effort

Size: ~400-500 LOC (excluding tests)
Time: 3-4 days
PR Count: 1 PR

---

🔗 Dependencies

• Phase 2 (Phase 2: Secret Create/Edit Forms #193) - Must be completed first
• Backend API (Phase 2: File Attachments API (Upload/Download/Encryption) api#175) ✅ Complete (File Attachments API)
• Frontend File Encryption ✅ Complete (PR feat(crypto): Phase 1 - AES-GCM-256 Encryption Utilities #177-190)

---

🔗 Blocks

• Phase 4 (Secret Sharing UI)

---

Type: Sub-Issue of #191
Priority: High
Estimated Effort: M (3-4 days)

[github-actions]

✅ This issue has been added to the SecPal Feature Roadmap with status: 💡 Ideas

New idea - needs discussion and evaluation

Status Flow:
💡 Ideas → 💬 Discussion → 📥 Backlog → 📋 Planned → 🚧 In Progress → 👀 In Review → ✅ Done

Note: Ideas that won't be implemented should be moved to 🚫 Won't Do with a reason.