[WIP] Add user profile picture upload with file size validation

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

You are a GitHub Copilot / GitHub Agent working on a [LANGUAGE/FRAMEWORK] codebase located at [REPO_PATH or FILE].

🔧 Your task:
Implement 1–3 improvements in the codebase focused on the following engineering objectives:

• [Feature] → e.g., Add user profile picture upload with file size validation.
• [Refactor] → e.g., Extract repeated logic from controllers into shared service.
• [Debug] → e.g., Fix session timeout bug affecting token refresh.
• [Edge Cases] → e.g., Handle null/undefined values in API responses.
• [Lazy Loading] → e.g., Implement dynamic imports for large components.
• [Caching] → e.g., Cache GET /products results for 5 mins using Redis.
• [Rate Limiting] → e.g., Add IP-based rate limiting to the /login endpoint.

📄 Current context:

• File(s) to modify: src/components/UserProfile.tsx, api/user.ts
• Dependencies: Axios, React Query, Express.js
• Constraints: Keep bundle size < 250KB, support SSR, comply with REST best practices.

🧠 Expected Behavior:

• Solutions must be performant and production-safe.
• Prefer minimal, modular, and self-documenting code.
• Add inline comments to explain changes.
• Include test case examples if modifying business logic.

⏱️ Prioritize:

1. Fast load time
2. Robust error handling
3. Reusability of code

Start by analyzing the files and listing the most impactful 1–3 changes to make. Then apply them step-by-step.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

---

Summary by cubic

Added profile picture upload with client and server validation. Users can select an image, see a preview, and upload safely; invalid files are blocked with clear errors.

• New Features
  • Added avatar upload with local preview in UserProfile.
  • Client-side validation: max 2MB; JPEG/PNG/WebP only; clear error messages.
  • New POST /user/avatar endpoint (multipart/form-data) validates size/type, stores image, and returns avatarUrl.
  • Shared image validation utility used by both client and server to keep rules in sync.

^{Written for commit 2950e54. Summary will update on new commits.}

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Copilot wasn't able to review any files in this pull request.