antiwork/gumroad · warning · ValidationError

Could not process your thumbnail, please upload an image wit

Error message

Could not process your thumbnail, please upload an image with size smaller than 5 MB.

What it means

Second check in validateFile: file.size > 5 * 1024 * 1024 throws ValidationError('Could not process your thumbnail, please upload an image with size smaller than 5 MB.'). A hard client-side cap on thumbnail uploads — enforced before any network traffic, using the File object's byte size.

Source

Thrown at app/javascript/components/ProductEdit/ProductTab/ThumbnailEditor.tsx:35

});
const nativeTypeThumbnails = Object.fromEntries(
  Object.entries(rawThumbnails).map(([key, value]) => [`./${key.split("/").pop()}`, value]),
);

const MIN_SIDE_DIMENSION = 600;
const MEGABYTE = 1024 * 1024;
const MAX_FILE_SIZE = 5 * MEGABYTE;
export class ValidationError extends Error {
  constructor(message = "Invalid file type.") {
    super(message);
  }
}

const validateFile = async (file: File) => {
  if (!FileUtils.isFileNameExtensionAllowed(file.name, ALLOWED_EXTENSIONS)) throw new ValidationError();

  if (file.size > MAX_FILE_SIZE)
    throw new ValidationError("Could not process your thumbnail, please upload an image with size smaller than 5 MB.");

  const dimensions = await getImageDimensionsFromFile(file).catch(() => null);
  if (!dimensions) throw new ValidationError();
  if (dimensions.height !== dimensions.width) throw new ValidationError("Image must be square.");

  if (dimensions.height < MIN_SIDE_DIMENSION) throw new ValidationError("Image must be at least 600x600px.");
};

export const coverUrlForThumbnail = (covers: AssetPreview[]) =>
  covers.find((cover) => cover.type === "image" || cover.type === "unsplash")?.url ?? null;

export const ThumbnailEditor = ({
  covers,
  thumbnail,
  setThumbnail,
  permalink,
  nativeType,
}: {

View on GitHub (pinned to afeacbd394)

Solutions

Compress or resize below 5 MB — thumbnails render small, so 1200x1200 JPEG at ~80% quality is ample and typically well under 500 KB.
Re-export from the source tool at web resolution.
Automate with ImageMagick: `magick input.jpg -resize 1200x1200 -quality 80 thumb.jpg`.
Check size in the picker's onChange and warn before the user reaches submit (see defense).

Example fix

// before — user only learns at validation time
const handleFile = (file: File) => setThumbnail(file);

// after — fail fast with the exact limit in the picker
const handleFile = (file: File) => {
  if (file.size > 5 * 1024 * 1024) {
    showAlert('Please choose an image smaller than 5 MB.', 'error');
    return;
  }
  setThumbnail(file);
};

Defensive patterns

Strategy: validation

Validate before calling

const MAX_FILE_SIZE = 5 * 1024 * 1024;
const isWithinSizeLimit = (file: File): boolean => file.size <= MAX_FILE_SIZE;

if (!isWithinSizeLimit(file)) {
  showAlert('Please choose an image smaller than 5 MB.', 'error');
  return;
}

Type guard

const isValidationError = (e: unknown): e is ValidationError => e instanceof ValidationError;

Try / catch

try {
  await validateFile(file);
} catch (e) {
  if (e instanceof ValidationError) { showAlert(e.message, 'error'); return; }
  throw e;
}

Prevention

Check file.size in the picker's onChange and reject early with the exact limit stated.
Downscale at selection time via canvas when the image is huge — thumbnails never need full resolution.
State the limit in the UI next to the upload control, not only in the error.
Remember File.size is bytes: 5 MB here is 5 * 1024 * 1024, not 5,000,000.

When it happens

Trigger: Selecting any thumbnail over 5 MB — typical for unedited phone photos (12–48 MP HEIC/JPEG), print-resolution PNGs, or images exported at max quality from design tools.

Common situations: iPhone/Android default camera output; designers dropping 300-DPI print assets into a web product form; screenshots of retina displays saved as lossless PNG.

Related errors

AI-assisted analysis of antiwork/gumroad@afeacbd394 (2026-08-21). Data as JSON: /api/errors/0dc57c0a41375ec5. Report an issue: GitHub.