Add browser-based image compression and 413 error handling

[Copilot]

Images embedded as base64 in learningmaps can cause 413 (Payload Too Large) errors when sharing. This adds automatic compression and proper error messaging.

Changes

• Image compression: Compress uploaded images via Canvas API before storing as base64

  • Resize to max 1920×1920px maintaining aspect ratio
  • Convert raster images to JPEG at 0.85 quality (typical 70-90% reduction)
  • SVG files bypass compression
  • Fallback to original on compression failure
  • Supported formats: JPG, PNG, WebP, and SVG only

• 413 handling: Detect payload too large responses and show specific error message instead of generic failure

• Translations: Add uploadFileTooLarge message (EN/DE) informing users they can download locally and share via other means

• Release management: Add changeset for v0.2.2 patch release and update documentation changelog

// Before: stored full-size base64
reader.readAsDataURL(file);

// After: compress first, then store
if (file.type === 'image/svg+xml') {
  reader.readAsDataURL(file); // SVG unchanged
} else {
  const compressed = await compressImage(file); // JPEG, resized
  handleFieldChange("data", compressed);
}

No new dependencies - uses native browser Canvas API.

Original prompt

Image sometimes increase the filesize of a learningmap. Investiage, if the images can be compress in the browser and show an error when the share link returns an 413. "Sharing bigger files is not allowed. you can still download your learningmap and share it via other means"

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
learningmap	Ready	Preview	Comment	Nov 4, 2025 9:08pm

[mikebarkmin]

@copilot only allow svg, png, webp and jpg files to be uploaded.

[Copilot]

@copilot only allow svg, png, webp and jpg files to be uploaded.

Updated the file input to restrict uploads to only SVG, PNG, WebP, and JPG formats. The accept attribute now includes image/webp, and the label has been updated to show all supported formats. (commit 509b8e9)

[mikebarkmin]

@copilot add a changeset and update the changelog in the docs

[Copilot]

@copilot add a changeset and update the changelog in the docs

Added changeset file for v0.2.2 patch release and updated the docs changelog with the new features and improvements. (commit 7f6a991)