Skip to content

Validate client-side that image size is a multiple of block size#3183

Open
david-crespo wants to merge 2 commits intomainfrom
image-block-validation
Open

Validate client-side that image size is a multiple of block size#3183
david-crespo wants to merge 2 commits intomainfrom
image-block-validation

Conversation

@david-crespo
Copy link
Copy Markdown
Collaborator

See #1920 (comment). Easiest thing in the world to do. Without this, the user can sit there for half an hour uploading a giant image file and only find out on the very last block that it is invalid.

Screenshot 2026-04-16 at 1 28 12 PM

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 16, 2026

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

Project Deployment Actions Updated (UTC)
console Ready Ready Preview Apr 17, 2026 6:03pm

Request Review

Comment thread app/forms/image-upload.tsx Outdated
control={form.control}
parseValue={(val) => parseInt(val, 10) as BlockSize}
// re-run imageFile validation when block size changes
rules={{ deps: ['imageFile'] }}
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Omg. Claude is constantly teaching me about RHF features. wtf!

Copy link
Copy Markdown
Contributor

@charliepark charliepark left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works. There's a small bit of friction in that if you change the block size before you select an image (a reasonable situation to find yourself in, as the block size comes first in the form), it fires off the validator, which then complains that no image has been loaded.
Image

Perhaps this isn't an issue, but I wanted to note it. I tried a few quick attempts to only conditionally make it required, but it was a bit messy and didn't feel like a better path.

@david-crespo
Copy link
Copy Markdown
Collaborator Author

Good catch, to me that is an issue. One simple approach would be to just remove the explicit dep and rely on it being checked on submit. It’s slightly worse than getting that immediate feedback when you change the block size when an image is present, but better than the spurious error.

@benjaminleonard
Copy link
Copy Markdown
Contributor

Do you have confidence that there's no edge cases here? You might consider a soft validation to allow a user to submit even if it's unlikely to work.

@david-crespo
Copy link
Copy Markdown
Collaborator Author

Do you have confidence that there's no edge cases here? You might consider a soft validation to allow a user to submit even if it's unlikely to work.

I have no such confidence.

@david-crespo
Copy link
Copy Markdown
Collaborator Author

@iliana or @augustuswm — thoughts on whether there are edge cases that mean we should make my file.size % blockSize === 0 check a soft validation rather than a hard validation, per Ben's question?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants