AOSSIE-Org / AOSSIE-Org/DebateAI
Feature Request: Profile Image Upload (Local File Support)
- Ngôn ngữ chính
- TypeScript
- Star
- 84
- Fork
- 198
- Merge trung bình
- 2 ngày 19 giờ
- Pull request đã merge (30 ngày)
- 30
Mô tả
### Summary
Currently, users can only choose profile avatars from preset DiceBear options. This issue proposes adding support for uploading a custom profile image from the local device, stored and served by the backend.
### Goal
Allow authenticated users to upload a JPG/PNG profile image, save it on the backend, and immediately display it in the UI with persistence across refreshes.
### Backend Changes
** New Controller**
```
File: backend/controllers/upload_controller.go
Function: UploadAvatar(c *gin.Context)
```
### Responsibilities:
1. Accept multipart file upload
2. Enforce max file size: 5MB
3. Validate file types: .jpg, .jpeg, .png
4. Save file to: ./uploads/avatars/
5. Return public URL:
> http://localhost:1313/uploads/avatars/
### Server Setup
_**File: backend/cmd/server/main.go**_
**Serve uploads directory statically:**
router.Static("/uploads", "./uploads")
**Register protected route:**
_auth.POST("/user/upload-avatar", controllers.UploadAvatar)_
⚠️ Note: Ensure uploads/avatars exists and backend has write permissions.
### Frontend Changes
#### **Profile Service**
```
File: frontend/src/services/profileService.ts
```
1. Add uploadAvatar(token, file) method
2. Use FormData
3. POST to /user/upload-avatar
4. Return uploaded avatar URL
#### **Profile Page UI**
_File: frontend/src/Pages/Profile.tsx_
1. Add hidden
2. Add an Upload Avatar button (or camera icon)
3. On file selection:
> - Call uploadAvatar
> - Update avatar URL in state
> - Reflect change immediately in UI
### Verification Plan
Backend
**1. Test with Postman:**
```
POST /user/upload-avatar
```
2. Confirm file saved in backend/uploads/avatars/
3. Confirm API returns valid public URL
**Frontend**
1. Login → Profile page
2. Click Upload Avatar
3. Select JPG/PNG image
4. Avatar updates instantly
5. Refresh page → avatar persists
**Labels (suggested)**
feature
frontend
backend
enhancement
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Đánh giá
Issue này chưa được đánh giá.