AOSSIE-Org / AOSSIE-Org/PictoPy
Feat: Image Download Support
- Ngôn ngữ chính
- Python
- Star
- 283
- Fork
- 679
- Merge trung bình
- 7 ngày 2 giờ
- Pull request đã merge (30 ngày)
- 3
Mô tả
### 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
- [x] Image file is correctly downloaded to the user's device.
- [x] Downloaded filename matches the original file or ID.
- [x] Toast notification appears upon successful download.
- [x] Error notification appears if the file is missing or the server fails.
- [x] UI remains responsive during the download process.
### Record
- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.