bug: image rescaling fix

[Saksham-Sirohi]

Fixes #1286 by implementing downscaling

2025-11-15.13-24-01.mp4

Summary by Sourcery

Implement configurable downscaling of avatars in ChangeAvatar component, standardize size constants, refactor upload logic to async with improved error handling, and add logging of image sizes

New Features:

• Add on-the-fly downscaling of avatar images to ensure uploads conform to size limits

Bug Fixes:

• Fix avatar upload errors by implementing proper image downscaling to avoid oversized files (User Profile: System keeps loading indefinitely when uploading large image files #1286)

Enhancements:

• Introduce MIN_AVATAR_SIZE and UPLOAD_AVATAR_SIZE constants and update all size validations accordingly
• Track selected file size and log both original and resized image dimensions during upload
• Refactor the update flow to async and centralize image processing with comprehensive HTTP error handling and user feedback

[sourcery-ai]

Reviewer's Guide

This PR refactors the avatar upload flow by replacing fixed-size logic with configurable constants, tracking and logging actual file sizes, and introducing client-side downscaling via a new createAvatarBlob helper; update() is converted to an async workflow with robust upload error handling.

Sequence diagram for the updated avatar upload and downscaling process

sequenceDiagram
actor User
participant "ChangeAvatar.vue"
participant "createAvatarBlob()"
participant "api.uploadFile()"
User->>"ChangeAvatar.vue": Selects avatar image
"ChangeAvatar.vue"->>"createAvatarBlob()": Downscale image on client
"createAvatarBlob()"-->>"ChangeAvatar.vue": Returns resized blob and dimension
"ChangeAvatar.vue"->>"api.uploadFile()": Upload resized image
"api.uploadFile()"-->>"ChangeAvatar.vue": Returns upload response
"ChangeAvatar.vue"->>User: Shows success or error message

Loading

Class diagram for updated ChangeAvatar.vue avatar upload logic

classDiagram
class ChangeAvatar {
  +MIN_AVATAR_SIZE: number
  +UPLOAD_AVATAR_SIZE: number
  +selectedFileSize: number
  +update()
  +createAvatarBlob(sourceCanvas)
}
ChangeAvatar : update() async
ChangeAvatar : createAvatarBlob(sourceCanvas) Promise<{blob, dimension}>
ChangeAvatar : fileSelected(event)
ChangeAvatar : changeIdenticon()
ChangeAvatar : pixelsRestrictions({minWidth, minHeight, maxWidth, maxHeight})
ChangeAvatar : avatarImage
ChangeAvatar : fileError
ChangeAvatar : changedImage
ChangeAvatar : cropperRef
ChangeAvatar : identiconUser
ChangeAvatar : identiconValue
ChangeAvatar : emit()
ChangeAvatar : api.uploadFile(blob, filename, null, width, height)
ChangeAvatar : error handling for upload
ChangeAvatar : logs file sizes

Loading

Flow diagram for avatar image downscaling and upload

flowchart TD
A[User selects avatar image] --> B[Validate file size and dimensions]
B --> C{Image valid?}
C -- No --> D[Show error]
C -- Yes --> E[Downscale image with createAvatarBlob]
E --> F[Upload resized image]
F --> G{Upload success?}
G -- No --> H[Show upload error]
G -- Yes --> I[Update avatar URL]

Loading

File-Level Changes

Change	Details	Files
Extract and apply configurable avatar size constants	Replaced hardcoded 128px limit with MIN_AVATAR_SIZE Added UPLOAD_AVATAR_SIZE constant for target downscale size Updated dimension checks and pixelRestrictions to use new constants	app/eventyay/webapp/src/components/profile/ChangeAvatar.vue
Track and log selected file size	Introduced selectedFileSize ref and reset on each file change Set selectedFileSize to avatarFile.size in fileSelected Logged original vs upload size and final dimensions in update()	app/eventyay/webapp/src/components/profile/ChangeAvatar.vue
Refactor update() to async with downscaling integration	Converted update() to async and removed callback-based resolve pattern Integrated createAvatarBlob to produce resized blob and dimension Emitted blockSave on processing errors and early returns	app/eventyay/webapp/src/components/profile/ChangeAvatar.vue
Implement createAvatarBlob helper for client-side downscaling	Created offscreen canvas sized to targetSize with high-quality smoothing Drew and resized source canvas content Converted result to blob and resolved with blob and dimension	app/eventyay/webapp/src/components/profile/ChangeAvatar.vue
Enhance upload logic and error handling	Wrapped api.uploadFile in a Promise with load and error listeners Checked HTTP status and content-type before parsing JSON Added custom error messages for 413 and parse failures Ensured blockSave emits on upload failures	app/eventyay/webapp/src/components/profile/ChangeAvatar.vue

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#1286	Prevent indefinite loading when uploading large image files by handling oversized uploads gracefully.	✅
#1286	Notify the user with a clear error message when the uploaded image file exceeds the allowed size limit.	✅

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey there - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Copilot]

Pull Request Overview

This PR fixes avatar upload errors by implementing on-the-fly image downscaling to ensure avatars conform to size limits and prevent oversized file uploads (issue #1286).

Key Changes:

• Introduces MIN_AVATAR_SIZE (128px) and UPLOAD_AVATAR_SIZE (256px) constants to standardize size validation and enforce upload limits
• Implements createAvatarBlob() function that downscales images to maximum 256px while maintaining quality using canvas API
• Refactors update() function to async with comprehensive error handling for HTTP status codes and content-type validation

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[mariobehling]

Please check AI reviews.

[Saksham-Sirohi]

updated