AOSSIE-Org / AOSSIE-Org/PictoPy

Feat: Image Download Support

未關閉
#1,068 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
Python
星號
283
分支
679
平均合併
7 天 2 小時
30 天內合併 PR
3

描述

### 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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。