Issue #45: feat: Implement file upload UI with drag-and-drop

State:

CLOSED

Milestone:

Jalon 2: Conformité Légale Belge 📋

Labels:

phase:vps,track:software priority:high

Assignees:

Unassigned

Created:

2025-10-27

Updated:

2025-11-13

URL:

View on GitHub

Description

## Context

**Backend implementation:** ✅ **70% complete**
- Document entity with 7 types
- FileStorage service (needs S3/MinIO integration - see #44)
- Document upload/download API endpoints
- MIME type support, file metadata tracking

**Frontend implementation:** ⚠️ **30% complete**
- DocumentList component displays documents
- **Missing:** Upload UI, drag-and-drop, progress indicators

## Objective

Implement user-friendly file upload UI with drag-and-drop for documents.

## Dependencies

**⚠️ Blocked by:** Issue #44 (Document storage strategy - Local/MinIO/S3)
- Upload UI can be developed in parallel
- Integration requires storage backend decision

## API Endpoint (Already Implemented)

`POST /api/v1/documents/upload` (multipart/form-data)

## Implementation Plan

### 1. File Upload Component

**Create:** `frontend/src/components/FileUpload.svelte`

Features:
- File input button
- Drag-and-drop zone
- Multi-file upload
- Upload progress bars (XHR progress events)
- File size validation (max 50MB)
- MIME type validation
- Document type selector
- Building/Meeting/Expense context
- Error handling

### 2. File Preview Component

**Create:** `frontend/src/components/FilePreview.svelte`
- Image preview (JPEG, PNG)
- PDF preview (thumbnail or icon)
- File type icons

### 3. Integration with Documents Page

**Update:** `frontend/src/pages/documents.astro`
- Add FileUpload component
- Refresh DocumentList after upload
- Success/error toasts

## Testing

- [ ] Single file upload
- [ ] Multi-file upload
- [ ] Drag-and-drop
- [ ] Progress indicator
- [ ] Size validation (client + server)
- [ ] Type validation
- [ ] Document list refresh

## Accessibility

- [ ] Keyboard accessible
- [ ] Screen reader support
- [ ] Error announcements (role="alert")
- [ ] Progress aria-valuenow

## Acceptance Criteria

- [ ] FileUpload component complete
- [ ] Drag-and-drop functional
- [ ] Multi-file support
- [ ] Progress visible
- [ ] Document type selector
- [ ] Image preview
- [ ] Validation (size, type)
- [ ] Integrated with documents page

## Effort Estimate

**Medium** (2 days)

## Related

- **Depends on:** Issue #44 (storage backend)
- Supports: Meeting minutes, invoices, contracts

## References

- MDN File API: https://developer.mozilla.org/en-US/docs/Web/API/File
- Drag and Drop API: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API