AOSSIE-Org / AOSSIE-Org/DebateAI

Feature Request: Profile Image Upload (Local File Support)

Đang mở
#279 2 bình luận 0 reaction 1 người được giao Được @priyanshunitr nhận Xem trên GitHub
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á.

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.