different-ai/openwork · error · Error

OpenWork could not decode that image.

Error message

OpenWork could not decode that image.

What it means

After the type/size checks pass, the file is decoded with createImageBitmap; if decoding throws (corrupt data, truncated file, unsupported encoding inside the claimed type, or a browser without createImageBitmap support), the error is rethrown with this user-facing message.

Source

Thrown at ee/apps/den-web/app/(den)/dashboard/_components/brand-appearance-screen.tsx:39

type BrandAssetKind = "logo" | "icon";

type BrandAssetDraft = {
  file: File;
  previewUrl: string;
  width: number;
  height: number;
};

async function createBrandAssetDraft(file: File, kind: BrandAssetKind): Promise<BrandAssetDraft> {
  if (file.type !== "image/png" && file.type !== "image/jpeg") throw new Error("Use a PNG or JPEG image.");
  if (file.size > BRAND_ASSET_MAX_BYTES) throw new Error("Use an image under 2 MB.");

  let image: ImageBitmap;
  try {
    image = await createImageBitmap(file);
  } catch {
    throw new Error("OpenWork could not decode that image.");
  }

  const { width, height } = image;
  image.close();
  if (width > 4096 || height > 4096) throw new Error("Use an image no larger than 4096×4096 pixels.");
  if (kind === "icon") {
    if (width < 64 || height < 64) throw new Error("Use a square icon at least 64×64 pixels.");
    if (width !== height) throw new Error("Use a square image for the app icon.");
  } else {
    const aspectRatio = width / height;
    if (width < 128 || height < 32) throw new Error("Use a wordmark at least 128×32 pixels.");
    if (aspectRatio < 1.5 || aspectRatio > 8) throw new Error("Use a horizontal wordmark between 1.5:1 and 8:1.");
  }

  return { file, previewUrl: URL.createObjectURL(file), width, height };
}

function BrandAssetUploadField({

View on GitHub (pinned to 2b7df46e8a)

Solutions

1. Re-export or re-save the image in an editor to repair/normalize the file, then upload again.
2. Verify the file opens in a browser/image viewer; if not, the source file is corrupt.
3. Convert genuinely different codecs (WebP/AVIF renamed to .png) to real PNG/JPEG.
4. For old-Safari users, add a fallback decode path (Image + object URL) or a feature check for window.createImageBitmap.

Example fix

// before
image = await createImageBitmap(file);
// after
if (typeof createImageBitmap === "undefined") {
  image = await decodeViaImageElement(file); // fallback using new Image() + URL.createObjectURL
} else {
  image = await createImageBitmap(file);
}

const isDecodeSupported = typeof createImageBitmap === "function";
if (!isDecodeSupported) { fallbackToImageElementDecode(file); }

try {
  const asset = await createBrandAssetDraft(file, kind);
} catch (error) {
  if (error instanceof Error && error.message.includes("decode")) showToast("The image file appears corrupt; try re-exporting it.");
  else showToast(error instanceof Error ? error.message : "Could not use that image.");
}

When it happens

Trigger: file.type says image/png or image/jpeg but the bytes are corrupt, truncated (partial download), actually another codec (mislabeled WebP/AVIF), or the browser lacks createImageBitmap (older Safari <15).

Common situations: Interrupted upload/download producing truncated files; files renamed to .png without conversion; progressive/CMYK JPEGs in odd decoders; old Safari where createImageBitmap is undefined so the call throws TypeError.

Related errors

• Use a PNG or JPEG image.
• Use an image under 2 MB.
• Use an image no larger than 4096×4096 pixels.
• Could not upload brand images (${response.status}).

AI-assisted analysis of different-ai/openwork@2b7df46e8a (2026-09-01). Data as JSON: /api/errors/1dfe7d301a9267d2. Report an issue: GitHub.