Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat(ui): Add drag to upload to AvatarUploader by alexcarpenter · Pull Request #8348 · clerk/javascript · GitHub
Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(ui): Add drag to upload to AvatarUploader by alexcarpenter · Pull Request #8348 · clerk/javascript · GitHub
Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(ui): Add drag to upload to AvatarUploader by alexcarpenter · Pull Request #8348 · clerk/javascript · GitHub
Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' feat(ui): Add drag to upload to AvatarUploader by alexcarpenter · Pull Request #8348 · clerk/javascript · GitHub
Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' feat(ui): Add drag to upload to AvatarUploader by alexcarpenter · Pull Request #8348 · clerk/javascript · GitHub
Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(ui): Add drag to upload to AvatarUploader by alexcarpenter · Pull Request #8348 · clerk/javascript · GitHub
Skip to content

feat(ui): Add drag to upload to AvatarUploader - #8348

Merged
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload
Jun 25, 2026
Merged

feat(ui): Add drag to upload to AvatarUploader#8348
alexcarpenter merged 4 commits into
mainfrom
carp/avatar-uploader-drag-to-upload

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Apr 17, 2026

Copy link
Copy Markdown
Member

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:

Summary by CodeRabbit

  • New Features
    • Added drag-and-drop support to avatar uploading, including visual feedback while a file is being dragged over the upload area.
    • Uploads now accept files dropped directly onto the avatar area, alongside the existing file picker.
  • Bug Fixes
    • Improved remove-button behavior so it stays available based on removal support, even after uploading.
    • Added validation handling for unsupported file types, oversized files, and non-file drops.

@changeset-bot

changeset-botBot commented Apr 17, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d34951

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

This PR includes changesets to release 3 packages
NameType
@clerk/uiMinor
@clerk/chrome-extensionPatch
@clerk/swingsetPatch

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

vercelBot commented Apr 17, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 25, 2026 3:38pm
swingsetReadyReadyPreview, CommentJun 25, 2026 3:38pm

Request Review

onClick={openDialog}
/>

{!!onAvatarRemove && !showUpload && (

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

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

fixed a bug where the remove button was showing inconsistently

@alexcarpenter
alexcarpenter marked this pull request as ready for review April 17, 2026 15:30
@coderabbitai

coderabbitaiBot commented Apr 17, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 96d8662c-b906-44ee-a09b-9ad22a97f247

📥 Commits

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

📒 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

AvatarUploader now accepts drag-and-drop image uploads, tracks drag-over state for styling, and updates remove-button behavior. Tests cover file input uploads, drag-and-drop validation, ignored drops, and removal. A changeset records a minor release for the UI package.

Changes

AvatarUploader drag-to-upload release note

Layer / File(s)Summary
Minor release entry
.changeset/wet-ants-kind.md
Marks the UI package for a minor release and notes AvatarUploader drag-to-upload support.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped through the code with a twinkle and grin,
Dragged in a file and let uploads begin.
The carrot was dashed, then the preview did glow,
With tests in the burrow, it’s ready to शो?
Hop, hop—new avatar magic in tow!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title clearly summarizes the main change: adding drag-to-upload support to AvatarUploader.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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

Comment @coderabbitai help to get the list of available commands.

@wobsorianowobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

sweeet!

@pkg-pr-new

pkg-pr-newBot commented Apr 20, 2026

Copy link
Copy Markdown

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/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@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: 9d34951

@github-actions

Copy link
Copy Markdown
Contributor

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

github-actionsBot commented Jun 13, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-25T15:39:38.518Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 9d34951.

…rag style
Adds card.setIdle() before invoking onAvatarRemove so the upload/remove
buttons are no longer stuck disabled after a remove completes. Replaces
the :has([data-rounded]) CSS selector with a direct rounded prop on
AvatarUploader, and passes rounded={false} from
OrganizationProfileAvatarUploader.
@alexcarpenter
alexcarpenterforce-pushed the carp/avatar-uploader-drag-to-upload branch from d3cd824 to 9d34951CompareJune 25, 2026 15:36
@alexcarpenter
alexcarpenter merged commit a1e37f4 into mainJun 25, 2026
50 checks passed
@alexcarpenter
alexcarpenter deleted the carp/avatar-uploader-drag-to-upload branch June 25, 2026 15:45
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@wobsoriano