Skip to content

🐛 fix: compress uploaded images to max 1920px before sending to API#13224

Merged
arvinxx merged 5 commits into
canaryfrom
fix/image
Mar 24, 2026
Merged

🐛 fix: compress uploaded images to max 1920px before sending to API#13224
arvinxx merged 5 commits into
canaryfrom
fix/image

Conversation

@arvinxx

@arvinxx arvinxx commented Mar 24, 2026

Copy link
Copy Markdown
Member

💻 Change Type

  • 🐛 fix

🔗 Related Issue

Fixes LOBE-6315,

🔀 Description of Change

Anthropic API rejects images exceeding 2000px in multi-image requests with error:
At least one of the image dimensions exceed max allowed size for many-image requests: 2000 pixels

This PR compresses uploaded chat images to max 1920px (with margin) before sending:

  • Updated compressImage utility: max size 2160→1920, removed default webp conversion (preserves original format jpg/png)
  • Added compressImageFile helper in upload flow to compress images before upload
  • Added maxSize parameter to compressImage for flexibility

🧪 How to Test

  • Added/updated tests
  1. Upload an image larger than 1920px in chat
  2. Verify the uploaded image is compressed to within 1920px while maintaining aspect ratio
  3. Verify the image format is preserved (not converted to webp)
  4. Upload an image smaller than 1920px and verify it is NOT compressed

🤖 Generated with Claude Code

Anthropic API rejects images exceeding 2000px in multi-image requests.
Compress images during upload to stay within limits while preserving
original aspect ratio and format (no webp conversion).

Fixes LOBE-6315

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Mar 24, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
lobehub Ready Ready Preview, Comment Mar 24, 2026 0:36am

Request Review

@sourcery-ai sourcery-ai 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.

We've reviewed this pull request using the Sourcery rules engine

@lobehubbot

Copy link
Copy Markdown
Member

@tjx666 - This is an image/vision feature fix (compressing uploaded images before sending to API). Please take a look.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5cd59bc39d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread src/store/file/slices/chat/action.ts Outdated
const filteredFiles = rawFiles.filter((file) => !FILE_UPLOAD_BLACKLIST.includes(file.name));
// 1. compress images and add files with base64
const files = await Promise.all(
filteredFiles.map((file) => (file.type.startsWith('image') ? compressImageFile(file) : file)),

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Skip canvas compression for unsupported image formats

The new pre-upload compression path applies to every image/* file, but compressImageFile serializes through canvas.toDataURL, which only reliably preserves raster formats like PNG/JPEG/WebP. Large animated GIFs or SVGs will be silently flattened/converted (often to PNG), so users lose animation/vector data and may upload content that no longer matches the original format. This regression is introduced by routing all image MIME types through compressImageFile; consider restricting compression to known safe formats (e.g. jpeg/png/webp) and leaving others unchanged.

Useful? React with 👍 / 👎.

@codecov

codecov Bot commented Mar 24, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 88.13559% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 74.20%. Comparing base (383cace) to head (8176c73).
⚠️ Report is 4 commits behind head on canary.

Additional details and impacted files
@@           Coverage Diff            @@
##           canary   #13224    +/-   ##
========================================
  Coverage   74.20%   74.20%            
========================================
  Files        1537     1537            
  Lines      126450   126499    +49     
  Branches    13930    14595   +665     
========================================
+ Hits        93828    93869    +41     
- Misses      32511    32519     +8     
  Partials      111      111            
Flag Coverage Δ
app 67.16% <14.28%> (-0.01%) ⬇️
database 97.89% <ø> (ø)
packages/agent-runtime 89.60% <ø> (ø)
packages/context-engine 83.57% <ø> (ø)
packages/conversation-flow 92.36% <ø> (ø)
packages/file-loaders 87.02% <ø> (ø)
packages/memory-user-memory 66.68% <ø> (ø)
packages/model-bank 99.84% <ø> (ø)
packages/model-runtime 84.79% <ø> (ø)
packages/prompts 74.60% <ø> (ø)
packages/python-interpreter 92.90% <ø> (ø)
packages/ssrf-safe-fetch 0.00% <ø> (ø)
packages/utils 90.34% <98.07%> (+0.24%) ⬆️
packages/web-crawler 88.82% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Components Coverage Δ
Store 66.04% <14.28%> (-0.02%) ⬇️
Services 49.72% <ø> (ø)
Server 68.65% <ø> (-0.01%) ⬇️
Libs 42.20% <ø> (ø)
Utils 91.41% <ø> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

arvinxx and others added 4 commits March 24, 2026 19:51
Canvas serialization flattens animated GIFs and rasterizes SVGs.
Restrict compression to safe raster formats: JPEG, PNG, WebP.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
canvas.toDataURL with original file type can produce content that
doesn't match the declared MIME type, causing Anthropic API errors.
Always output PNG which is universally supported and consistent.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
If compressed PNG still exceeds 5MB, progressively reduce dimensions
by 20% until it fits. Also triggers compression for small-dimension
images that exceed 5MB file size.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… tests

Move compressImageFile, COMPRESSIBLE_IMAGE_TYPES, and constants to
@lobechat/utils/compressImage for reusability and testability.
Add tests for: dimension compression, file size limit, format filtering,
error handling, and progressive shrinking.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@arvinxx arvinxx merged commit 007d2dc into canary Mar 24, 2026
34 checks passed
@arvinxx arvinxx deleted the fix/image branch March 24, 2026 13:24
@lobehubbot

Copy link
Copy Markdown
Member

❤️ Great PR @arvinxx ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.

ONLY-yours added a commit that referenced this pull request Mar 27, 2026
# 🚀 release: 20260326

This release includes **91 commits**. Key updates are below.


- **Agent can now execute background tasks** — Agents can perform
long-running operations without blocking your conversation.
[#13289](#13289)
- **Better error messages** — Redesigned error UI across chat and image
generation with clearer explanations and recovery options.
[#13302](#13302)
- **Smoother topic switching** — No more full page reloads when
switching topics while an agent is responding.
[#13309](#13309)
- **Faster image uploads** — Large images are now automatically
compressed to 1920px before upload, reducing wait times.
[#13224](#13224)
- **Improved knowledge base** — Documents are now properly parsed before
chunking, improving retrieval accuracy.
[#13221](#13221)

### Bot Platform

- **WeChat Bot support** — You can now connect LobeChat to WeChat, in
addition to Discord.
[#13191](#13191)
- **Richer bot responses** — Bots now support custom markdown rendering
and context injection.
[#13294](#13294)
- **New bot commands** — Added `/new` to start fresh conversations and
`/stop` to halt generation.
[#13194](#13194)
- **Discord stability fixes** — Fixed thread creation issues and Redis
connection drops.
[#13228](#13228)
[#13205](#13205)

### Models & Providers

- **GLM-5** is now available in the LobeHub model list.
[#13189](#13189)
- **Coding Plan providers** — Added support for code planning assistant
providers. [#13203](#13203)
- **Tencent Hunyuan 3.0 ImageGen** — New image generation model from
Tencent. [#13166](#13166)
- **Gemini content handling** — Better handling when Gemini blocks
content due to safety filters.
[#13270](#13270)
- **Claude token limits fixed** — Corrected max window tokens for
Anthropic Claude models.
[#13206](#13206)

### Skills & Tools

- **Auto credential injection** — Skills can now automatically request
and use required credentials.
[#13124](#13124)
- **Smarter tool permissions** — Built-in tools skip confirmation for
safe paths like `/tmp`.
[#13232](#13232)
- **Model switcher improvements** — Quick access to provider settings
and visual highlight for default model.
[#13220](#13220)

### Memory

- **Bulk delete memories** — You can now delete all memory entries at
once. [#13161](#13161)
- **Per-agent memory control** — Memory injection now respects
individual agent settings.
[#13265](#13265)

### Desktop App

- **Gateway connection** — Desktop app can now connect to LobeHub
Gateway for enhanced features.
[#13234](#13234)
- **Connection status indicator** — See gateway connection status in the
titlebar. [#13260](#13260)
- **Settings persistence** — Gateway toggle state now persists across
app restarts. [#13300](#13300)

### CLI

- **API key authentication** — CLI now supports API key auth for
programmatic access.
[#13190](#13190)
- **Shell completion** — Tab completion for bash/zsh/fish shells.
[#13164](#13164)
- **Man pages** — Built-in manual pages for CLI commands.
[#13200](#13200)

### Security

- **XSS protection** — Sanitized search result image titles to prevent
script injection.
[#13303](#13303)
- **Workflow hardening** — Fixed potential shell injection in release
automation. [#13319](#13319)
- **Dependency update** — Updated nodemailer to address security
advisory. [#13326](#13326)

### Bug Fixes

- Fixed skill page not redirecting correctly after import.
[#13255](#13255)
[#13261](#13261)
- Fixed token counting in group chats.
[#13247](#13247)
- Fixed editor not resetting when switching to empty pages.
[#13229](#13229)
- Fixed manual tool toggle not working.
[#13218](#13218)
- Fixed Search1API response parsing.
[#13207](#13207)
[#13208](#13208)
- Fixed mobile topic menus rendering issues.
[#12477](#12477)
- Fixed history count calculation for accurate context.
[#13051](#13051)
- Added missing Turkish translations.
[#13196](#13196)

### Credits

Huge thanks to these contributors:

@bakiburakogun @hardy-one @Zhouguanyang @sxjeru @hezhijie0327 @arvinxx
@cy948 @CanisMinor @Innei @lijian @lobehubbot @neko @rdmclin2
@rivertwilight @tjx666
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Chat image uploads lack size validation, causing provider API errors

2 participants