Skip to content

Default File component imageSize to 100#7

Merged
preshin merged 1 commit into
mainfrom
fix/file-image-size-default
Apr 28, 2026
Merged

Default File component imageSize to 100#7
preshin merged 1 commit into
mainfrom
fix/file-image-size-default

Conversation

@preshin
Copy link
Copy Markdown
Owner

@preshin preshin commented Apr 28, 2026

Summary

Formio's File component defaults imageSize to '200', producing 200px-wide image previews that overflow narrow form layouts. This PR defaults it to 100 for newly added File components and for runtime forms whose JSON omits the property.

Why two parts

Naively wrapping FileComponent.schema() to inject imageSize: '100' is necessary but not sufficient. Formio's File editForm has a textfield bound to imageSize that is conditionally hidden until "Display as image(s)" is checked. That field inherits the global default clearOnHide: true, so as soon as the edit dialog renders, Formio strips data.imageSize (since the textfield is hidden) — wiping our seeded '100' before the user ever sees it. The preview <img> then renders with style="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:

  1. Schema wrap — sets the initial imageSize: '100' on new components / runtime defaults. User-provided imageSize in form JSON still wins via lodash _.merge.
  2. EditForm walk — recursively walks the editForm structure and disables clearOnHide on the imageSize textfield 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.json2.0.32.0.4.

Test plan

  • npm run dev, drag a File component onto the example builder.
  • Tick "Display as image(s)" → Image Size shows 100 as a real value.
  • Drop an image → preview renders at 100px wide; <img> has style="width:100px".
  • Expand "View JSON Schema Output" → component JSON has "imageSize": "100".
  • Hand-edit a form's JSON to set imageSize: "300" → user value still wins.
  • Console check: Formio.Components.components.file.schema() returns { ..., imageSize: "100" }.

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
@preshin preshin self-assigned this Apr 28, 2026
@preshin preshin merged commit 48acfa0 into main Apr 28, 2026
1 check passed
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.

1 participant