fix(client): sync profile avatar editor state across cancel, save, an…

OP
10d ago
+63-10

Proposed changes

Closes #38697.

The "My Account → Profile" avatar editor's local preview state was not synchronized with the parent form's avatar field, and the hidden <input type="file"> was never reset between selections. This caused several inconsistencies after cancel/save/reset cycles:

  • Re-uploading the same file after Cancel produced no preview (file input's change event doesn't fire when the value is unchanged).
  • Cancelling after a click on Reset/Initials sometimes left a stale preview instead of restoring the saved avatar.
  • Reset → Save would leave the old photo's URL still rendered because the cached image URL had no cache-buster.

Changes

  • useSingleFileInput — clear the file input's value before each click() and after each successful selection so the same file always re-fires the change event.
  • UserAvatarEditor — accept the form's current avatar value as a prop and clear the local preview state in a useEffect whenever the form transitions from a set value back to empty (i.e. a Cancel/Save reset).
  • AccountProfileForm — pass the watched avatar value down to UserAvatarEditor, and include avatar: '' in the post-save reset() so the editor sees the transition.
  • The reset preview URL now includes the user's etag to bust the browser cache when the saved avatar changes.

Issue(s)

Closes #38697.

Steps to test or reproduce

  1. Go to My Account → Profile.
  2. Test A: Upload a picture → Cancel → upload the same picture again → preview reappears immediately.
  3. Test B: Upload a picture → Save → profile photo updates.
  4. Test C: Upload a picture → click Reset/Initials → Cancel → preview restores to the previously saved avatar.
  5. Test D: Upload a picture → Save → click Reset/Initials → Save → avatar resets to initials in your profile.

Further comments

The broader UI cache (sidebar, header avatar) refreshing without a full page reload is a separate useUser invalidation concern and is out of scope here — this PR fixes the editor state itself.

Summary by CodeRabbit

  • Bug Fixes
    • Improved profile avatar editor synchronization across cancel, save, and reset flows.
    • The same avatar file can now be selected again after canceling or re-opening the editor.
    • Canceling or saving no longer leaves stale avatar previews.
    • Resetting an avatar now refreshes correctly when the saved avatar changes, avoiding outdated cached images.