mckaywrigley/chatbot-ui · warning

Image must be less than ${imageSizeLimit / 1000000}MB

Error message

Image must be less than ${imageSizeLimit / 1000000}MB

What it means

Thrown by uploadMessageImage when the image File exceeds the hardcoded 6000000-byte (6MB) limit. It's a client-side pre-flight check before any Supabase call, so no network traffic occurs when it throws. The limit is a literal in source, not configurable via env.

Source

Thrown at db/storage/message-images.ts:9

import { supabase } from "@/lib/supabase/browser-client"

export const uploadMessageImage = async (path: string, image: File) => {
  const bucket = "message_images"

  const imageSizeLimit = 6000000 // 6MB

  if (image.size > imageSizeLimit) {
    throw new Error(`Image must be less than ${imageSizeLimit / 1000000}MB`)
  }

  const { error } = await supabase.storage.from(bucket).upload(path, image, {
    upsert: true
  })

  if (error) {
    throw new Error("Error uploading image")
  }

  return path
}

export const getMessageImageFromStorage = async (filePath: string) => {
  const { data, error } = await supabase.storage
    .from("message_images")
    .createSignedUrl(filePath, 60 * 60 * 24) // 24hrs

View on GitHub (pinned to 81328b61d2)

Solutions

1. Compress or resize the image client-side (e.g. canvas re-encode to JPEG at ~80% quality) before calling uploadMessageImage.
2. Show an inline file-picker warning when image.size > 6*1000*1000 so the user can pick a smaller file.
3. If 6MB is too tight for your users, raise the constant in db/storage/message-images.ts (and keep the Supabase bucket cap in mind).
4. Convert HEIC/RAW to JPEG upstream so typical sizes land under the cap.

Example fix

// before
const file = selectedFile // 9MB photo
const path = await uploadMessageImage(path, file)

// after
const file =
  selectedFile.size > 6000000
    ? await compressImage(selectedFile, 0.8) // helper: canvas re-encode
    : selectedFile
const path = await uploadMessageImage(path, file)

const MAX = 6_000_000
if (image.size > MAX) {
  toast.error(`Image must be under 6MB — yours is ${(image.size / 1e6).toFixed(1)}MB`)
  return
}

const isValidMessageImage = (f: File): boolean =>
  f.type.startsWith("image/") && f.size <= 6_000_000

try {
  await uploadMessageImage(path, image)
} catch (e) {
  if (e instanceof Error && e.message.includes("less than 6MB")) {
    // prompt user to compress; not a system failure
  } else { throw e }
}

When it happens

Trigger: Selecting a photo/export/screenshot larger than 6MB for a chat message; HEIC/RAW photos from modern phones that are commonly 8-15MB; using a Blob built from canvas at full resolution. Any image.size > 6000000 triggers it immediately.

Common situations: Phone camera originals exceeding 6MB; users pasting large screenshots; the limit differing from other flows (assistant images also 6MB, profile images 2MB) so users get confused about which cap applies; no client-side pre-check in the picker UI so the throw surfaces as an unhandled rejection.

Related errors

• Image must be less than ${imageSizeLimit / 1000000}MB
• File must be less than ${Math.floor(SIZE_LIMIT / 1000000)}MB
• Error uploading image
• Error downloading message image

AI-assisted analysis of mckaywrigley/chatbot-ui@81328b61d2 (2026-08-27). Data as JSON: /api/errors/48d9691a83c1d908. Report an issue: GitHub.