Add avatar-upload validation to src/features/dashboard/pages/ProfilePage.tsx

[Jagadeeshftw]

📌 Description

src/features/dashboard/pages/ProfilePage.tsx (has a test file already) likely includes an avatar upload/change flow. Without explicit client-side validation, a user could select an oversized file (slow/failed upload), a non-image file (broken rendering), or an SVG containing embedded script (a known XSS vector for user-uploaded SVGs if rendered inline).

🧩 Requirements and context

• Add file-type validation limited to safe raster formats (reject SVG uploads or strip/sanitize them server-side — flag as a backend follow-up if SVG must be supported).
• Add a file-size limit with a clear error message before attempting upload.
• Add a test for each rejected case and for a valid small image succeeding.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b fix/profile-avatar-upload-validation

2. Implement changes

• Modify: src/features/dashboard/pages/ProfilePage.tsx — add pre-upload file validation.
• Modify: src/features/dashboard/pages/ProfilePage.test.tsx — add the validation test cases.

3. Test and commit

• Run tests:

npm test -- run ProfilePage

• Cover edge cases: oversized file, non-image file with an image-like extension, SVG file upload, zero-byte file.
• Include test output and details in the PR description.

Example commit message

fix: add file-type and size validation to avatar upload

✅ Acceptance criteria

• Invalid uploads (wrong type, oversized, SVG) are rejected client-side with a clear message before any network call.
• A valid small raster image uploads and updates the avatar successfully.
• Existing avatar-display rendering is unaffected.

🔒 Security notes

SVG uploads rendered inline/unsanitized are a known stored-XSS vector (SVGs can embed <script>); if SVG support is required, flag server-side sanitization as a mandatory companion fix, don't rely on client-side rejection alone as the only defense.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[Jagadeeshftw]

Assigned to @jaynomyaro. Please open a PR referencing this issue (e.g. Closes #509) when it's ready.

[Jagadeeshftw]

Unassigning @jaynomyaro — this has been assigned for more than 2 days with no PR opened yet. No worries if you're still working on it, just re-comment and we'll happily reassign once you're ready to pick it back up.

[Jagadeeshftw]

Assigned @jaynomyaro! Go ahead and open a PR referencing this issue (Closes #509) when ready. t.me/+vTbe0hOUKrFhNTJl

[Jagadeeshftw]

Correction: the assignment above actually failed — @jaynomyaro's GitHub account no longer exists (deleted or renamed), so it can't be set as an assignee. Leaving this unassigned.