fix: team avatar uploader

[harshtandiya]

Summary by CodeRabbit

• New Features
  • Added image cropping functionality to team logo uploads. Users can now crop images before uploading with real-time progress feedback and improved error handling. The upload button dynamically displays status ("Upload Logo," "Change," or "Uploading X%").

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces an image upload component with client-side cropping capabilities. It adds the vue-advanced-cropper dependency, creates a new ImageUploader component that manages file validation, crop dialog interactions, and file uploads via FileUploadHandler, and integrates this component into ManageTeamHeader for team logo uploads.

Changes

Cohort / File(s)	Summary
Dependency Management frontend/package.json	Added vue-advanced-cropper v2.6.2 to support client-side image cropping functionality.
Image Upload Component frontend/src/components/ImageUploader/ImageUploader.vue	New Vue 3 component providing image upload with configurable crop dimensions, file type validation, optional custom validation callback, and FileUploadHandler integration. Exposes openFileSelector() method and inputRef accessor; emits success/failure events with upload progress tracking.
Team Logo Integration frontend/src/components/team/ManageTeamHeader.vue	Replaced static logo upload button with ImageUploader component configured for 400x400 crop dimensions. Button label now reflects upload state (Upload Logo / Change / Uploading {progress}%) and delegates file selection to ImageUploader.

Sequence Diagram

sequenceDiagram
    actor User
    participant UI as ManageTeamHeader
    participant Uploader as ImageUploader
    participant Cropper as vue-advanced-cropper
    participant Handler as FileUploadHandler
    participant Server

    User->>UI: Click Upload Logo Button
    UI->>Uploader: openFileSelector()
    User->>Uploader: Select Image File
    Uploader->>Cropper: Open Crop Dialog
    User->>Cropper: Adjust Crop Area
    User->>Cropper: Confirm Crop
    Cropper->>Uploader: Return Cropped Image
    Uploader->>Handler: Upload PNG Blob
    Handler->>Server: POST Image File
    Server-->>Handler: Success Response
    Handler-->>Uploader: UploadedFile Data
    Uploader->>UI: Emit success Event
    UI->>Server: Update Team Logo

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: team logos #40: Implements team logo feature in frontend with upload and display flows, sharing the same functional goal of updating team logo state.

Poem

🐰 Snip-snip, snap-snap, the cropper's here to stay,
Uploading team logos in the prettiest way,
Vue-advanced hops about with cropping so keen,
The finest uploaded images ever seen! ✂️📸

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately describes the main change: introducing an ImageUploader component to replace the previous logo upload button in ManageTeamHeader, improving the team avatar/logo upload functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/team-avatar-upload

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

frontend/src/components/ImageUploader/ImageUploader.vue (1)

237-244: Consider consolidating error handling.

The error event handler sets a generic message, while the .catch() block (lines 251-273) parses and overwrites it with a more specific error. This works but the on("error") handler becomes redundant since .catch() always follows.

♻️ Optional: Simplify by removing redundant error event handler

-    uploader.on("error", () => {
-        uploading.value = false;
-        error.value = "Error Uploading File";
-    });
     uploader.on("finish", () => {
         uploading.value = false;
         finishedUploading.value = true;
     });

The .catch() block already handles uploading.value = false and sets the error message.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/ImageUploader/ImageUploader.vue` around lines 237 -
244, The uploader.on("error", ...) handler is redundant because the Promise
.catch() already sets uploading.value = false and populates error.value; remove
the uploader.on("error", ...) block and ensure the existing .catch() code (the
Promise rejection handler for uploader.upload/... ) continues to set
uploading.value = false and a descriptive error.message into error.value; keep
the uploader.on("finish", ...) handler and finishedUploading.value assignment
intact.

frontend/package.json (1)

24-24: Approve the vue-advanced-cropper dependency for image cropping functionality.

Version 2.6.2 is stable and available in the npm registry. The caret specifier allows for compatible minor and patch updates. Consider updating to a newer version (2.8.9 is the latest) for additional features and improvements.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/package.json` at line 24, Approve the "vue-advanced-cropper"
dependency entry in package.json; either keep the existing caret version
specifier "^2.6.2" if you want to freeze to compatible 2.x minors/patches, or
update the version string to "^2.8.9" to pick up the latest improvements; after
changing the "vue-advanced-cropper" version run the package manager (npm install
or yarn install) to update package-lock.json/yarn.lock and verify the app builds
and image-cropping functionality works.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@frontend/src/components/ImageUploader/ImageUploader.vue`:
- Around line 42-55: The watch handler sets cropperReady too early causing
getResult() to run before the Cropper has initialized; instead, wire the Cropper
component's `@ready` event to set cropperReady = true and ensure cropperReady is
only reset to false when the dialog closes (leave the watcher to clear readiness
on close only), and use the cropperRef and getResult() as before so getResult()
is only invoked after the `@ready` event has fired.

In `@frontend/src/components/team/ManageTeamHeader.vue`:
- Around line 40-52: The Button's label ternary gives precedence to
teamStore.currentTeam?.logo so it shows "Change" while uploading; update the
label expression in the Button component to check uploading first (use uploading
? `Uploading ${progress}%` : teamStore.currentTeam?.logo ? 'Change' : 'Upload
Logo') so progress text displays during uploads and fallback to 'Change' or
'Upload Logo' otherwise.

---

Nitpick comments:
In `@frontend/package.json`:
- Line 24: Approve the "vue-advanced-cropper" dependency entry in package.json;
either keep the existing caret version specifier "^2.6.2" if you want to freeze
to compatible 2.x minors/patches, or update the version string to "^2.8.9" to
pick up the latest improvements; after changing the "vue-advanced-cropper"
version run the package manager (npm install or yarn install) to update
package-lock.json/yarn.lock and verify the app builds and image-cropping
functionality works.

In `@frontend/src/components/ImageUploader/ImageUploader.vue`:
- Around line 237-244: The uploader.on("error", ...) handler is redundant
because the Promise .catch() already sets uploading.value = false and populates
error.value; remove the uploader.on("error", ...) block and ensure the existing
.catch() code (the Promise rejection handler for uploader.upload/... ) continues
to set uploading.value = false and a descriptive error.message into error.value;
keep the uploader.on("finish", ...) handler and finishedUploading.value
assignment intact.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0f2bc207-cbee-46fb-927c-4f2793e20c93

📥 Commits

Reviewing files that changed from the base of the PR and between 6c908ad and 03f3dc2.

⛔ Files ignored due to path filters (1)

• frontend/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (3)

• frontend/package.json
• frontend/src/components/ImageUploader/ImageUploader.vue
• frontend/src/components/team/ManageTeamHeader.vue

[coderabbitai]

⚠️ Potential issue | 🟠 Major

cropperReady is set prematurely before the cropper has actually loaded the image.

The watch handler sets cropperReady = true immediately when the dialog opens (line 148), but the Cropper component needs time to load and initialize the image. If users click "Crop & Upload" before the image is fully loaded, getResult() may return an empty or incomplete canvas.

The vue-advanced-cropper provides a @ready event that fires when the cropper has finished initializing. Use this event to properly track readiness.

🐛 Proposed fix using the `@ready` event

Update the Cropper component to use the @ready event:

 <Cropper
     v-if="cropImageUrl"
     ref="cropperRef"
     :src="cropImageUrl"
     :stencil-props="{
         aspectRatio: cropDimensions.width / cropDimensions.height,
     }"
     :canvas="{
         width: cropDimensions.width,
         height: cropDimensions.height,
     }"
     image-restriction="stencil"
     class="cropper"
+    `@ready`="cropperReady = true"
 />

Update the watch handler to only reset cropperReady on close:

 watch(cropDialogOpen, (open) => {
     if (!open) {
         revokeCropUrl();
         file.value = null;
         cropperReady.value = false;
-    } else {
-        cropperReady.value = true;
     }
 });

Also applies to: 142-150

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/ImageUploader/ImageUploader.vue` around lines 42 -
55, The watch handler sets cropperReady too early causing getResult() to run
before the Cropper has initialized; instead, wire the Cropper component's `@ready`
event to set cropperReady = true and ensure cropperReady is only reset to false
when the dialog closes (leave the watcher to clear readiness on close only), and
use the cropperRef and getResult() as before so getResult() is only invoked
after the `@ready` event has fired.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Bug: Button label shows "Change" during upload when a logo already exists.

The ternary condition checks teamStore.currentTeam?.logo first, so when a logo exists, the button always shows "Change" regardless of the uploading state. The uploading check should take precedence to show progress feedback.

🐛 Proposed fix to correct ternary precedence

 <Button
     :label="
-        teamStore.currentTeam?.logo
-            ? 'Change'
-            : uploading
+        uploading
             ? `Uploading ${progress}%`
+            : teamStore.currentTeam?.logo
+            ? 'Change'
             : 'Upload Logo'
     "
     icon-left="upload"
     variant="outline"
     :loading="uploading"
     `@click`="openFileSelector"
 />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/team/ManageTeamHeader.vue` around lines 40 - 52, The
Button's label ternary gives precedence to teamStore.currentTeam?.logo so it
shows "Change" while uploading; update the label expression in the Button
component to check uploading first (use uploading ? `Uploading ${progress}%` :
teamStore.currentTeam?.logo ? 'Change' : 'Upload Logo') so progress text
displays during uploads and fallback to 'Change' or 'Upload Logo' otherwise.