Skip to content

Story 2448 - Webpage Integration Edit User Profile Avatar#2523

Open
jlchilders11 wants to merge 4 commits into
jc/update-avatar-componentfrom
jc/2448-integration-avatar
Open

Story 2448 - Webpage Integration Edit User Profile Avatar#2523
jlchilders11 wants to merge 4 commits into
jc/update-avatar-componentfrom
jc/2448-integration-avatar

Conversation

@jlchilders11

Copy link
Copy Markdown
Collaborator

Issue: #2448

Summary & Context

Performs the necessary hook up for allowing for the saving of a new avatar image for the user, or deleting that same image.

  • Link to components/page: localhost:8000/users/me/?edit=True

Changes

  • Implements the alpine click functionality on the button component to allow for saving the file when clicking the button
  • Implements the save function, which passes the formdata to the api/v1/users/me/ endpoint
  • Updates that endpoint to accept new profile images, as well as allowing the view to optionally accept the delete argument to delete the profile_image
  • Updates the user profile page to redirect to login if not already logged in

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing
The states in the form are somewhat fragile, as they rely on invisible checkboxes and srcs on images.
Javascriptless functionality will be implemented in a future ticket.

Self-review Checklist

  • Link this PR to the related GitHub Project ticket

Frontend

  • No console errors or warnings

@coderabbitai

coderabbitai Bot commented Jul 9, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 10db0c0b-a871-4dfd-865e-0b7fa78527a1

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

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch jc/2448-integration-avatar

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@julhoang julhoang linked an issue Jul 10, 2026 that may be closed by this pull request
@jlchilders11 jlchilders11 changed the title Jc/2448 integration avatar Story 2448 - Webpage Integration Edit User Profile Avatar Jul 10, 2026
@herzog0 herzog0 self-requested a review July 13, 2026 16:23
@julhoang julhoang self-requested a review July 13, 2026 17:31

@herzog0 herzog0 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking pretty good!!
I just have a couple of notes/findings we could take a look at.

One general note: the backend is already returning the correct error message. Would be nice if we could use it to display in the form instead of a generic message. Btw, backend says the user shouldn't exceed 1MB, while FE says 5MB.

Image

Comment thread users/views.py
permission_classes = [IsAuthenticated]

def perform_update(self, serializer):
instance = serializer.save()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is bypassing a previous block path that existed in the legacy version.
I don't know exactly why this exists, but in the admin panel you're able to disallow a user to update their profile picture, and this logic exists in users/forms.py line 133.

Image Image

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I think we should maybe re-evaluate this new section entirely and take a deeper look into the pre-existing save() function in the model I just mentioned, as it includes some other important stuff like preventing automatic avatar overrides when refresh_users_github_photos runs, for example.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you clarify what you mean? I'm not entirely clear what the logic in the form save is doing, other than the thumbnail cleanup myself.

Comment thread users/views.py
permission_classes = [IsAuthenticated]

def perform_update(self, serializer):
instance = serializer.save()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just creating a new comment here in the same place, as I don't have much else where to comment.
I accidentally stumbled into this error, and I truly believe we should either rename the file ourselves to some random uuid, or at least tell the user exactly what went wrong.

Image

Comment thread users/views.py
Comment on lines +75 to +76
if self.request.POST.get("delete_profile_image", "").lower() == "true":
instance.profile_image.delete()

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something interesting that happens here: the user can add/replace their avatar AND send a "delete" request at the same time, causing the image to be first uploaded, saved to the users record, then deleted right after that. You can see how the FE actually sends both in the payload as well:

Image

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is true, but I'm not sure if this is a problem?

Comment thread users/views.py
Comment on lines +542 to +544
if request.GET.get("edit", "").lower() == "true" and isinstance(
request.user, AnonymousUser
):

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here you're only covering for ?edit=True, but if a logged out user navigates to /users/me they get an error:

Image

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Webpage Integration: Edit User Profile - Avatar

2 participants