Client-side dimension checks give users immediate feedback before a large image is uploaded. Decode the selected file, read its intrinsic bitmap size, and reject dimensions outside the product’s limits. Repeat the validation on the server because browser checks can be bypassed.
Last updated: September 26, 2026.
const input = document.querySelector('#photo');
const message = document.querySelector('#photo-message');
input.addEventListener('change', async () => {
const file = input.files?.[0];
if (!file) return;
try {
const bitmap = await createImageBitmap(file);
const valid = bitmap.width >= 800 && bitmap.height >= 600
&& bitmap.width <= 6000 && bitmap.height <= 6000;
message.textContent = valid
? bitmap.width + ' × ' + bitmap.height + ' pixels'
: 'Choose an image between 800×600 and 6000×6000 pixels.';
if (!valid) input.value = '';
bitmap.close();
} catch {
message.textContent = 'The selected file is not a supported image.';
input.value = '';
}
});createImageBitmap() accepts a File or Blob and resolves only after decoding succeeds. Closing the bitmap releases its resources when the check is finished.
Validate more than the filename
The file extension and browser-provided MIME type are useful hints, not proof of content. A renamed non-image file may still reach the handler. Limit file size before decoding, catch decoder errors, and run a trusted image parser again after upload.
MDN documents createImageBitmap as widely available and notes that it honors image orientation by default. Decide whether your dimensions should reflect oriented display or raw encoded pixels.
Explain the rule to the user
Place the requirement next to the file control before selection, then announce the result in a visible status element with aria-live="polite". Do not rely only on color. If aspect ratio matters, compare bitmap.width / bitmap.height with a tolerance rather than expecting an exact floating-point value.
Preview or resize after validation
Once the image passes, show it using the existing image preview pattern. If large camera images should be reduced before transfer, continue with client-side image resizing. Treat both as convenience and performance features; the server must still enforce type, size, dimensions, and storage rules.
