Describe the feature
Current Status / Problem The application lacked the ability for users to export or download images from the viewer to their local system.
❌ No backend endpoint to serve raw image files.
❌ No "Download" button in the Media Viewer UI.
❌ Users could view images but not save them outside the app.
Goal Implement complete image download support, including:
Backend API to securely serve image files from disk.
Frontend UI to trigger the download action.
User Feedback (Notifications) to confirm success or failure.
Expected Behavior When a user opens an image in the full-screen Media Viewer and clicks the "Download" icon:
Demo Video related to Solution
i am providing a google drive link because i was unable to upload the screenrecording
https://drive.google.com/file/d/1p6Rokzy1SWVMN6SYbug8px6-2pNlkPZl/view?usp=drive_link
Frontend: Sends a request to the download endpoint.
Backend:
Verifies the image exists in the database.
Verifies the file exists on the disk.
Streams the file back to the client with the correct filename.
Browser: Triggers the native file save dialog or auto-downloads the file.
UI: Displays a toast notification: "Image Downloaded Successfully!" (or "Download Failed").
Scope
- Backend (Python)
Update: backend/app/routes/images.py
Added GET /images/download/{image_id} endpoint.
Implemented file existence checks and FileResponse.
Frontend (React/TypeScript)
Update: frontend/src/components/Media/MediaViewControls.tsx
Added Download button using lucide-react icon.
Update: frontend/src/components/Media/MediaView.tsx
Implemented handleDownload logic using apiClient.
Added Toast Notification UI and state logic.
API Implementation
Endpoint: `GET /images/download/{image_id}`
Response: `FileResponse` (application/octet-stream)
Acceptance Criteria
Record
Describe the feature
Current Status / Problem The application lacked the ability for users to export or download images from the viewer to their local system.
❌ No backend endpoint to serve raw image files.
❌ No "Download" button in the Media Viewer UI.
❌ Users could view images but not save them outside the app.
Goal Implement complete image download support, including:
Backend API to securely serve image files from disk.
Frontend UI to trigger the download action.
User Feedback (Notifications) to confirm success or failure.
Expected Behavior When a user opens an image in the full-screen Media Viewer and clicks the "Download" icon:
Demo Video related to Solution
i am providing a google drive link because i was unable to upload the screenrecording
https://drive.google.com/file/d/1p6Rokzy1SWVMN6SYbug8px6-2pNlkPZl/view?usp=drive_link
Frontend: Sends a request to the download endpoint.
Backend:
Verifies the image exists in the database.
Verifies the file exists on the disk.
Streams the file back to the client with the correct filename.
Browser: Triggers the native file save dialog or auto-downloads the file.
UI: Displays a toast notification: "Image Downloaded Successfully!" (or "Download Failed").
Scope
- Backend (Python)
Update:
backend/app/routes/images.pyAdded
GET /images/download/{image_id}endpoint.Implemented file existence checks and
FileResponse.Frontend (React/TypeScript)
Update:
frontend/src/components/Media/MediaViewControls.tsxAdded Download button using
lucide-reacticon.Update:
frontend/src/components/Media/MediaView.tsxImplemented
handleDownloadlogic usingapiClient.Added Toast Notification UI and state logic.
API Implementation
Acceptance Criteria
Record