Repository navigation
Compress large images for form submissions - #772
Open
icycoldveins wants to merge 8 commits into
Open
icycoldveins wants to merge 8 commits into
icycoldveins wants to merge 8 commits into
Conversation
field.onChange from useController takes a single value, so passing ('images', [data]) set the field to the string 'images' and the resolved schema rejected every submission that included an image.
Photos over 5 MB were rejected by the dropzone, so the resource forms silently submitted without an image. Downscale to 2048px and re-encode as JPEG (quality steps, then dimension steps) until the file fits, for both the Add a Site and Suggest an Edit forms. Animated GIFs pass through untouched.
Generates a 20 MB noisy PNG, drops it into the Add a Site form, and asserts the signed upload request switches to image/jpeg and the resource is submitted with the uploaded image key.
Compression runs silently, and the extra copy just cluttered the dropzone. The uploader now shows only the accepted formats and the selected filename.
Hand-rolled canvas decode/resize/quality-stepping duplicated what a maintained library already solves, and ran entirely on the main thread. browser-image-compression gives the same behavior (downscale to 2048px, JPEG output, skip GIFs/already-small files) plus Web Worker offloading for free, at a fraction of the code.
nathanktruong
requested changes
Oct 20, 2026
nathanktruong
left a comment
nathanktruong
left a comment
Contributor
There was a problem hiding this comment.
Commented with a recommendation for a simpler implementation, ahead of this Saturday's walk!
Apart from the image compression strategy - removing the maxSize restriction and fixing the bug with onSuccess look good to me.
browser-image-compression is unmaintained. Its last release was in March 2023. compressorjs is maintained, MIT licensed, and covers the same resize and JPEG conversion needs for image uploads.
No module imports formatFileSize, so the util is dead code. Removing it keeps the utils folder limited to code that has callers.
…-uploads # Conflicts: # package.json # pnpm-lock.yaml
icycoldveins
marked this pull request as ready for review
October 20, 2026 22:58
AnilKumar3494
self-requested a review
October 21, 2026 12:45
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
Change Summary
imagesfieldChange Reason
Images over 5 MB were rejected by the uploader, so the form submission went through without the selected image. Users should be able to pick an image of any size and let the app handle the compression.
Related Issue: #769