AOSSIE-Org / AOSSIE-Org/PictoPy

Feat: Image Download Support

Đang mở
#1,068 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
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

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.