feat(ui): Add drag to upload to AvatarUploader

[alexcarpenter]

Description

upload.mov

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

⚠️ No Changeset found

Latest commit: ba1ecc9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Apr 17, 2026 3:21pm

[alexcarpenter]

fixed a bug where the remove button was showing inconsistently

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: fb9d3204-7676-485a-958b-783876193d9b

📥 Commits

Reviewing files that changed from the base of the PR and between 39f49d9 and ba1ecc9.

📒 Files selected for processing (3)

• packages/ui/src/elements/Avatar.tsx
• packages/ui/src/elements/AvatarUploader.tsx
• packages/ui/src/elements/__tests__/AvatarUploader.test.tsx

---

📝 Walkthrough

Walkthrough

The changes enhance the Avatar component and refactor the AvatarUploader component. The Avatar component now exposes its rounded prop as a DOM attribute. The AvatarUploader component has been refactored to replace a showUpload toggle state with isDraggingOver drag-state tracking, adds drag-and-drop event handlers with file validation (checking for Files in the transfer and preventing default behavior), applies conditional visual styling to a wrapped preview element during drag operations, and removes upload completion callback behavior. Comprehensive test coverage for AvatarUploader has been added, verifying file upload via input, drag-and-drop behavior with valid and invalid files, file type and size validation, remove button visibility, and callback invocations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Detailed breakdown

Avatar.tsx: A single-line addition exposing the rounded prop as a DOM attribute—straightforward and low-risk.

AvatarUploader.tsx: Introduces new drag-and-drop event handling logic with file validation, replaces state management patterns, and adjusts conditional rendering. The logic density is moderate; the changes are contained within one component but require careful review of event handler behavior and the transition from the prior showUpload pattern.

AvatarUploader.test.tsx: A well-structured test suite that comprehensively validates the new behavior, including file input uploads, drag-and-drop scenarios, validation edge cases, and UI state assertions. The test file serves as executable documentation of expected behavior.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and specifically describes the main change: adding drag-to-upload functionality to the AvatarUploader component, which aligns with the primary modifications across all changed files.
Description check	✅ Passed	The PR description is related to the changeset, providing a visual reference to the feature via an embedded video/asset demonstrating the drag-to-upload functionality mentioned in the title.
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.}

---

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.}