Feature Request: Profile Image Upload (Local File Support)

[JaYRaNa213]

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

[JaYRaNa213]

@rixitgithub @bhavik-mangla sir
I want to work on this new feature

please assign this issue to me