🌐 US-Proxy
class="logged-out env-production page-responsive" style="word-wrap: break-word;" >
Skip to content

feat(image-upload): add button to clear uploaded image - #1725

Merged
Shreyag02 merged 1 commit into
mainfrom
feat/image-upload-clear-button
Jul 3, 2026
Merged

feat(image-upload): add button to clear uploaded image#1725
Shreyag02 merged 1 commit into
mainfrom
feat/image-upload-clear-button

Conversation

@Shreyag02

@Shreyag02 Shreyag02 commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds a "clear" affordance to the shared ImageUpload component so users can remove a previously uploaded image (e.g. an organization logo), which was previously impossible once an image was set. Also wires the organization avatar field into the edit form's default values so then current logo renders and can be cleared/edited correctly.

Changes

  • image-upload.tsx: Added a small corner "clear" button (Cross2Icon) that appears over the avatar when a value is present and the field is enabled. Clicking it calls onChange('') to clear the image. Wrapped the upload IconButton in a positioned avatarWrapper so the corner button can be anchored to it.
  • image-upload.module.css: Added .avatarWrapper (relative, inline-flex positioning context) and .cornerButton (absolutely positioned top-right badge styling) styles.
  • organization.tsx: Added avatar: organization?.avatar || "" to getDefaultValue() so the existing org logo populates the edit form's default values.

Technical Details

  • The clear button is only rendered when !disabled && value — an empty field just shows the upload icon, and disabled fields can't be cleared.
  • Clearing is treated as an intentional state: the logo is optional, so onClearClick emits an empty string through the existing onChange handler rather than introducing a separate callback. This keeps the component's API unchanged for consumers.
  • .cornerButton uses design-system tokens (--rs-color-*, --rs-radius-full, --rs-shadow-sm) for consistency with the rest of the SDK.

Test Plan

  • Manual testing completed
    • Uploaded an org logo, confirmed the clear (✕) button appears on the corner.
    • Clicked clear and verified the image is removed and the upload icon reappears.
    • Confirmed the button does not appear when no image is set or when the field is disabled.
    • Confirmed the org edit form loads with the existing avatar as its default value.
  • Build and type checking passes

SQL Safety (if your PR touches *_repository.go or goqu.*)

N/A

@vercel

vercel Bot commented Jul 1, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontier Ready Ready Preview, Comment Jul 1, 2026 10:41am

@Shreyag02
Shreyag02 requested review from rohanchkrabrty and rsbh and removed request for rohanchkrabrty July 1, 2026 10:41
@coderabbitai

coderabbitai Bot commented Jul 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Added a clear-image control to the image upload UI, letting users remove an existing image directly.
    • The organization edit form now keeps the current avatar populated when opening the form.

  • Style

    • Improved image upload button and wrapper styling for better positioning and hover behavior.

Walkthrough

This PR adds a clear-image button to the ImageUpload component, including an onClearClick handler, Cross2Icon import, and new CSS classes for an avatar wrapper and corner button. It also updates the organization edit form to include an avatar default value.

Changes

Image Upload Clear Action and Avatar Default

Layer / File(s) Summary
Clear-image button and styling
web/sdk/client/components/image-upload/image-upload.tsx, web/sdk/client/components/image-upload/image-upload.module.css		 Adds a Cross2Icon-based clear button shown when enabled and a value exists, with an onClearClick handler resetting the value, and new .avatarWrapper/.cornerButton CSS classes plus an updated hover comment.
Organization avatar default
web/sdk/admin/views/organizations/details/edit/organization.tsx		 getDefaultValue now sets an avatar default from organization?.avatar.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

  • raystack/frontier#1484: Introduces a profile UI using the same ImageUpload component for avatar upload, connecting directly to this PR's clear-button and avatar defaulting changes.

Suggested reviewers: rsbh, paanSinghCoder

🚥 Pre-merge checks | ✅ 2
✅ Passed checks (2 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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.

coderabbitai[bot]
coderabbitai Bot reviewed Jul 1, 2026
View reviewed changes

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 73877f1a-7a20-49b8-a993-6b593a2b9d63

📥 Commits

Reviewing files that changed from the base of the PR and between ed17ed9 and a5f987f.

📒 Files selected for processing (3)
  • web/sdk/admin/views/organizations/details/edit/organization.tsx
  • web/sdk/client/components/image-upload/image-upload.module.css
  • web/sdk/client/components/image-upload/image-upload.tsx

Comment thread web/sdk/client/components/image-upload/image-upload.tsx
@coveralls

coveralls commented Jul 1, 2026

Copy link
Copy Markdown

Coverage Report for CI Build 28511703765

Coverage remained the same at 44.02%

Details

  • Coverage remained the same as the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.

Coverage Stats

Coverage Status
Relevant Lines: 37115
Covered Lines: 16338
Line Coverage: 44.02%
Coverage Strength: 12.43 hits per line
💛 - Coveralls

rohanchkrabrty
rohanchkrabrty approved these changes Jul 3, 2026
View reviewed changes
Comment thread web/sdk/client/components/image-upload/image-upload.module.css
@Shreyag02
Shreyag02 merged commit f46911c into main Jul 3, 2026
8 checks passed
@Shreyag02
Shreyag02 deleted the feat/image-upload-clear-button branch July 3, 2026 07:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rohanchkrabrty rohanchkrabrty rohanchkrabrty approved these changes
@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments
@rsbh rsbh Awaiting requested review from rsbh

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Shreyag02 @coveralls @rohanchkrabrty