Default File component imageSize to 100#7
Merged
Conversation
Formio's File component defaults imageSize to '200', producing 200px-wide
image previews that overflow narrow form layouts. Two-part patch:
(a) Wrap the static schema so newly added File components in the builder,
and runtime defaults for forms whose JSON omits imageSize, both pick
up '100'. Per-component imageSize in form JSON still wins via lodash
_.merge.
(b) Walk the File editForm definition and disable clearOnHide on the
imageSize textfield. The textfield is conditionally hidden until
"Display as image(s)" is checked and inherits the global default
clearOnHide: true, which strips data.imageSize the moment the edit
dialog renders — so without this fix the seeded value gets wiped
before the user ever sees it, leaving the preview <img> with
style="width:px" and the field showing only its hardcoded
placeholder until the user retypes a number.
Also expose the File component in the example builder so this patch
has a regression target.
Bump version to 2.0.4.
Made-with: Cursor
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.
Summary
Formio's File component defaults
imageSizeto'200', producing 200px-wide image previews that overflow narrow form layouts. This PR defaults it to100for newly added File components and for runtime forms whose JSON omits the property.Why two parts
Naively wrapping
FileComponent.schema()to injectimageSize: '100'is necessary but not sufficient. Formio's File editForm has a textfield bound toimageSizethat is conditionally hidden until "Display as image(s)" is checked. That field inherits the global defaultclearOnHide: true, so as soon as the edit dialog renders, Formio stripsdata.imageSize(since the textfield is hidden) — wiping our seeded'100'before the user ever sees it. The preview<img>then renders withstyle="width:px"and the field shows only its hardcoded placeholder until the user retypes a number.So the patch has two parts in
src/index.js:imageSize: '100'on new components / runtime defaults. User-providedimageSizein form JSON still wins via lodash_.merge.clearOnHideon theimageSizetextfield so the seeded value persists through the initial hidden state.Changes
src/index.js— Patch 4 (matches the existing Patch 1–3 runtime-patch pattern).example/main.jsx— exposes the File component in the example builder so this patch has a regression target.package.json—2.0.3→2.0.4.Test plan
npm run dev, drag a File component onto the example builder.100as a real value.<img>hasstyle="width:100px"."imageSize": "100".imageSize: "300"→ user value still wins.Formio.Components.components.file.schema()returns{ ..., imageSize: "100" }.