feat(account): Add direct profile picture upload and removal via FastAPI endpoints

[RsbhThakur]

Closes #13263

feat: Add direct profile picture upload and removal via FastAPI endpoints

Technical

1. FastAPI Avatar Endpoints (openlibrary/fastapi/account.py):

   • Added POST /account/avatar endpoint with Pillow image validation, EXIF metadata stripping, RGB normalization, and max 500x500 JPEG re-encoding.
   • Integrated Internet Archive S3 upload (ia.get_item().upload) with queue_derive=True signal for automatic thumbnail derivative processing.
   • Added DELETE /account/avatar endpoint to remove custom profile picture timestamp and reset avatar URL.
   • Updates user account avatar_updated timestamp and invalidates user-avatar-{username} Memcached key.

2. Reverse Proxy Stream Fix (openlibrary/plugins/openlibrary/deprecated_handler.py):

   • Extracted binary file streams directly from v.file.read() to prevent UnicodeDecodeError when proxying multipart form data from legacy web.py to FastAPI.

3. UI Enhancements (openlibrary/templates/type/user/edit.html):

   • Updated avatar src to route via $(page.key)/avatar with circular container overflow and onerror fallback safety.
   • Added instant client-side preview (URL.createObjectURL) on file selection.
   • Added inline Upload Photo and Remove Photo buttons with async status updates and error details.

4. Model Formatting (openlibrary/core/models.py):

   • Ensured itemname formatting with @ prefix in User.get_avatar_url() and appended ?v={avatar_updated} query parameter for CDN/browser cache invalidation.

Testing

1. Automated Unit Tests:

   uv run --with-requirements requirements_test.txt pytest openlibrary/tests/fastapi/test_account.py

   (19/19 pytest unit tests passing in 1.04s)

2. Pre-commit Quality Hooks:

   pre-commit run --files openlibrary/core/models.py openlibrary/fastapi/account.py openlibrary/plugins/openlibrary/deprecated_handler.py openlibrary/templates/type/user/edit.html openlibrary/tests/fastapi/test_account.py

   (All linter, formatter, walrus, and i18n hooks passed cleanly)

3. Manual Verification:

   • Log in and navigate to http://localhost:8080/people/<username>?m=edit.
   • Click Choose File and select an image — observe instant DOM circular preview.
   • Click Upload Photo — status displays green "Uploaded successfully!".
   • Click Remove Photo — status displays green "Photo removed successfully!". If no photo exists, displays "No custom profile picture exists to remove".

Screenshot

Stakeholders

• @mekarpeles