From bc3a73348e47d906737f6337982c6dfd8298b38f Mon Sep 17 00:00:00 2001
From: Preshin P S <preshin.smith@workato.com>
Date: Tue, 28 Apr 2026 12:43:47 +0530
Subject: [PATCH] Default File component imageSize to 100
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 example/main.jsx |  1 +
 package.json     |  2 +-
 src/index.js     | 45 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/example/main.jsx b/example/main.jsx
index 57f3f49..d7945e3 100644
--- a/example/main.jsx
+++ b/example/main.jsx
@@ -206,6 +206,7 @@ function FormBuilderDemo() {
                   select: true,
                   radio: true,
                   number: true,
+                  file: true,
                   button: true,
                 },
               },
diff --git a/package.json b/package.json
index 4daa64d..3a1b606 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-formio-engine",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Form engine with builder and renderer - formiojs-powered with React functional components",
   "type": "module",
   "main": "dist/form-engine.umd.js",
diff --git a/src/index.js b/src/index.js
index 3bade3f..cd39181 100644
--- a/src/index.js
+++ b/src/index.js
@@ -75,6 +75,51 @@ if (NumberComponent?.prototype?.createNumberMask) {
   };
 }
 
+// Patch 4: File component — default imageSize to '100' (formio's default is '200')
+//
+// Two parts: (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'. User-provided 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 clearOnHide:true, so without this
+// formio strips data.imageSize the moment the edit dialog renders — leaving
+// the preview <img> with style="width:px" and the field showing only its
+// placeholder until the user retypes a number.
+const FileComponent = Components.components?.file;
+if (FileComponent?.schema) {
+  const _origFileSchema = FileComponent.schema.bind(FileComponent);
+  FileComponent.schema = function (...extend) {
+    return _origFileSchema({ imageSize: '100' }, ...extend);
+  };
+}
+if (FileComponent?.editForm) {
+  const _origFileEditForm = FileComponent.editForm;
+  FileComponent.editForm = function (...args) {
+    const result = _origFileEditForm.apply(this, args);
+    const walk = (comps) => {
+      if (!Array.isArray(comps)) return;
+      for (const c of comps) {
+        if (!c || typeof c !== 'object') continue;
+        if (c.key === 'imageSize') {
+          c.clearOnHide = false;
+        }
+        if (Array.isArray(c.components)) walk(c.components);
+        if (Array.isArray(c.columns)) {
+          c.columns.forEach((col) => walk(col?.components));
+        }
+        if (Array.isArray(c.rows)) {
+          c.rows.forEach(
+            (row) => Array.isArray(row) && row.forEach((col) => walk(col?.components)),
+          );
+        }
+      }
+    };
+    walk(result?.components);
+    return result;
+  };
+}
+
 // ---------------------------------------------------------------------------
 
 // ReactComponent (Field class) for backward compat with custom components