fix: Banner uploader fix error handling and reduce image size jump by alishaz-polymath · Pull Request #21903 · calcom/cal.diy

alishaz-polymath · 2025-06-18T12:56:09Z

What does this PR do?

Adds support for JPEG images in base64 conversion, leading to better adjusted images. Earlier we were forcing base64 png even on jpeg uploads where it would result in a jump of even 30 times in size, in complex images.

Fixes Improve image uploader #21896 (GitHub issue number)
Fixes Fix error message when saving new uploaded image #21895
Fixes CAL-5955 (Linear issue number - should be visible at the bottom of the GitHub issue description)

Visual Demo (For contributors especially)

A visual demonstration is strongly recommended, for both the original and new change (video / image - any one).

Video Demo (if applicable):

Show screen recordings of the issue or feature.
Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

Add side-by-side screenshots of the original and updated change.
Highlight any significant change(s).

Mandatory Tasks (DO NOT REMOVE)

I have self-reviewed the code (A decent size PR without self-review might be rejected).
I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

Are there environment variables that should be set?
What are the minimal test data to have?
What is expected (happy path) to have (input and output)?
Any other important info that could help to test that PR

Checklist

I haven't read the contributing guide
My code doesn't follow the style guidelines of this project
I haven't commented my code, particularly in hard-to-understand areas
I haven't checked if my changes generate no new warnings

Summary by cubic

Improved the banner image uploader to support JPEG images, reduce large file size jumps, and show clearer error messages when uploads fail.

Bug Fixes
- Preserves original image format (JPEG or PNG) during upload to prevent unnecessary file size increases.
- Adds better error handling and user feedback for oversized images.

linear · 2025-06-18T12:56:12Z

CAL-5955 Improve image uploader

vercel · 2025-06-18T12:57:23Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview		Jun 19, 2025 3:18am
cal-eu	⬜️ Ignored (Inspect)	Visit Preview		Jun 19, 2025 3:18am

alishaz-polymath · 2025-06-18T12:58:09Z

  const mutation = trpc.viewer.organizations.update.useMutation({
    onError: (err) => {
+      // Handle JSON parsing errors from body size limit exceeded
+      if (err.message.includes("Unexpected token") && err.message.includes("Body excee")) {


The unhandled error is: "Unexpected token 'B', "Body excee"... is not valid JSON"
So this takes care of that.

alishaz-polymath · 2025-06-18T12:59:05Z

-  return canvas.toDataURL("image/png");
+  // Use original format with quality setting for JPEG
+  return canvas.toDataURL(originalFormat, originalFormat === "image/jpeg" ? 0.6 : undefined);


We don't force convert to png, which was the primary cause for the crazy size jump.

cubic-dev-ai

cubic found 1 issue across 5 files. Review it in cubic.dev

_{React with 👍 or 👎 to teach cubic. Tag @cubic-dev-ai to give specific feedback.}

anikdhabal

Looks Good

heykandoi · 2025-06-18T13:39:31Z

I may be wrong here, but doesn't this limit the image size to just 1mb?

alishaz-polymath · 2025-06-18T13:44:23Z

I may be wrong here, but doesn't this limit the image size to just 1mb?

No, that part never changed. We've always had that limit, but here's what is happening behind the scenes:

A user uploads an image, the limit of the image selected by the user in terms of size there is 5mb.
The uploaded image is then cropped (during upload) and encoded into base64. It automatically reduces in size considerably here now.
When we proceed with the mutation (click save), there the limit is 1mb and with these code changes, that should almost always satisfy.

heykandoi · 2025-06-18T13:53:15Z

I may be wrong here, but doesn't this limit the image size to just 1mb?

No, that part never changed. We've always had that limit, but here's what is happening behind the scenes:

A user uploads an image, the limit of the image selected by the user in terms of size there is 5mb.

The uploaded image is then cropped (during upload) and encoded into base64. It automatically reduces in size considerably here now.

When we proceed with the mutation (click save), there the limit is 1mb and with these code changes, that should almost always satisfy.

Does this mean I can upload a 4.5mb PNG file without any issue? Does it get converted to JPEG?

emrysal

nice improvement

alishaz-polymath · 2025-06-18T14:05:07Z

I may be wrong here, but doesn't this limit the image size to just 1mb?

No, that part never changed. We've always had that limit, but here's what is happening behind the scenes:

A user uploads an image, the limit of the image selected by the user in terms of size there is 5mb.

The uploaded image is then cropped (during upload) and encoded into base64. It automatically reduces in size considerably here now.

When we proceed with the mutation (click save), there the limit is 1mb and with these code changes, that should almost always satisfy.

Does this mean I can upload a 4.5mb PNG file without any issue? Does it get converted to JPEG?

PNG will not be converted into JPEG. But it would still be compressed enough when cropping. So it would be worth a try 😅
I'd recommend using JPEG though.

github-actions · 2025-06-18T14:14:41Z

E2E results are ready!

Workflow #63860.1 latest results

…alcom#21903) * improve uploader * better error handling * unnecessary check * more adjustments * remove logs

alishaz-polymath added 4 commits June 18, 2025 16:06

improve uploader

dd0c34d

better error handling

038da1b

unnecessary check

129f52c

more adjustments

f05a5c2

alishaz-polymath requested review from a team as code owners June 18, 2025 12:56

github-actions Bot added the 🧹 Improvements Improvements to existing features. Mostly UX/UI label Jun 18, 2025

keithwillcode added core area: core, team members only enterprise area: enterprise, audit log, organisation, SAML, SSO labels Jun 18, 2025

remove logs

344fc27

dosubot Bot added the 🐛 bug Something isn't working label Jun 18, 2025

vercel Bot temporarily deployed to Preview – cal June 18, 2025 12:57 Inactive

vercel Bot temporarily deployed to Preview – api June 18, 2025 12:57 Inactive

alishaz-polymath commented Jun 18, 2025

View reviewed changes

cubic-dev-ai Bot reviewed Jun 18, 2025

View reviewed changes

Comment thread packages/features/ee/organizations/pages/settings/profile.tsx Outdated

anikdhabal approved these changes Jun 18, 2025

View reviewed changes

anikdhabal enabled auto-merge (squash) June 18, 2025 13:12

Merge branch 'main' into fix/image-uploader

2416134

anikdhabal mentioned this pull request Jun 18, 2025

refactor: improve error handling in image uploaders by storing error … #21901

Closed

alishaz-polymath added the ready-for-e2e label Jun 18, 2025

emrysal approved these changes Jun 18, 2025

View reviewed changes

vercel Bot deployed to Preview – dev June 18, 2025 14:03 View deployment

Merge branch 'main' into fix/image-uploader

ae98e89

github-actions Bot added organizations area: organizations, orgs ⚡ Quick Wins A collection of quick wins/quick fixes that are less than 30 minutes of work labels Jun 18, 2025

pumfleet approved these changes Jun 18, 2025

View reviewed changes

vercel Bot deployed to Preview – dev June 18, 2025 15:31 View deployment

anikdhabal added ready-for-e2e and removed ready-for-e2e labels Jun 19, 2025

Merge branch 'main' into fix/image-uploader

3cc196b

anikdhabal mentioned this pull request Jun 19, 2025

fix: add api.bodyParser.sizeLimit of 5mb for image uploads #21905

Closed

3 tasks

anikdhabal merged commit a5fe101 into main Jun 19, 2025
37 of 38 checks passed

anikdhabal deleted the fix/image-uploader branch June 19, 2025 03:35

vercel Bot deployed to Preview – dev June 19, 2025 03:39 View deployment

BKM14 pushed a commit to BKM14/cal.com that referenced this pull request Jun 26, 2025

fix: Banner uploader fix error handling and reduce image size jump (c…

6b35840

…alcom#21903) * improve uploader * better error handling * unnecessary check * more adjustments * remove logs

Conversation

alishaz-polymath commented Jun 18, 2025 • edited by anikdhabal Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Visual Demo (For contributors especially)

Video Demo (if applicable):

Image Demo (if applicable):

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Checklist

Summary by cubic

Uh oh!

linear Bot commented Jun 18, 2025

Uh oh!

vercel Bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alishaz-polymath Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

alishaz-polymath Jun 18, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

anikdhabal left a comment

Choose a reason for hiding this comment

Uh oh!

heykandoi commented Jun 18, 2025

Uh oh!

alishaz-polymath commented Jun 18, 2025

Uh oh!

heykandoi commented Jun 18, 2025

Uh oh!

emrysal left a comment

Choose a reason for hiding this comment

Uh oh!

alishaz-polymath commented Jun 18, 2025

Uh oh!

github-actions Bot commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

E2E results are ready!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

alishaz-polymath commented Jun 18, 2025 •

edited by anikdhabal

Loading

vercel Bot commented Jun 18, 2025 •

edited

Loading

github-actions Bot commented Jun 18, 2025 •

edited

Loading