AOSSIE-Org / AOSSIE-Org/DebateAI

Feature Request: Profile Image Upload (Local File Support)

Offen
#279 2 Kommentare 0 Reaktionen 1 zugewiesene Person Beansprucht von @priyanshunitr Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
84
Forks
198
Ø Merge
2 T. 19 Std.
Gemergte PRs (30 T.)
30

Beschreibung

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

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.