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]

🦋 Changeset detected

Latest commit: d3cd824

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Minor
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another 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	Jun 13, 2026 12:09pm
swingset	Ready	Preview, Comment	Jun 13, 2026 12:09pm

[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: 4b18f603-fee8-428b-a825-b4efc99c7030

📥 Commits

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

📒 Files selected for processing (1)

• .changeset/wet-ants-kind.md

✅ Files skipped from review due to trivial changes (1)

• .changeset/wet-ants-kind.md

---

📝 Walkthrough

Walkthrough

Added a data-rounded={rounded} attribute to the Avatar root element. Refactored AvatarUploader to replace showUpload with isDraggingOver, add drag-and-drop handlers (enter/over/leave/drop) that check for Files, prevent default behavior, set dropEffect, and call upload() for the first dropped file; removed the upload-completion toggle and adjusted preview styling (dashed outline and border-radius) while dragging. Added a comprehensive test suite for AvatarUploader covering file-input uploads, drag-and-drop success and failure cases (type/size), non-file drags, and remove-button behavior. A changeset declaring a minor release was added.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(ui): Add drag to upload to AvatarUploader' clearly and concisely describes the main change—adding drag-to-upload functionality to the AvatarUploader component, which aligns with the core modifications across all changed files.
Description check	✅ Passed	The description references drag-to-upload functionality and includes a video asset demonstrating the feature, which is directly related to the changeset that adds drag-and-drop event handlers and visual feedback to AvatarUploader.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

_{✏️ 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.}

[wobsoriano]

sweeet!

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8348

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8348

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8348

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8348

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8348

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8348

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8348

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8348

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8348

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8348

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8348

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8348

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8348

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8348

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8348

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8348

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8348

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8348

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8348

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8348

commit: d3cd824

[github-actions]

Hello 👋

We currently close PRs after 60 days of inactivity. It's been 50 days since the last update here. If we missed this PR, please reply here. Otherwise, we'll close this PR in 10 days.

Thanks for being a part of the Clerk community! 🙏

[github-actions]

API Changes Report

Generated by Break Check on 2026-06-13T12:10:23.197Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on d3cd824.}