From 89bc5b10c9eb0b3f8a73feabac61414fac22b4df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Goulart?= <vinicius.goulart@camunda.com>
Date: Fri, 23 Aug 2024 03:15:32 +0200
Subject: [PATCH] fix: fix filepicker component merge error

---
 .../src/carbon-styles.js                      |   3 +-
 .../src/carbon-styles.scss                    |   3 +-
 .../test/spec/complex.json                    |   6 +
 .../src/components/PlaygroundRoot.js          |   3 +-
 .../form-js-playground/test/spec/form.json    |   6 +
 packages/form-js-viewer/src/Form.js           |   5 +-
 .../src/core/FormFieldInstanceRegistry.js     |  60 +++--
 .../expressionLanguage/ConditionChecker.js    |   6 +
 .../repeatRender/RepeatRenderManager.js       |  71 +++---
 .../form-js-viewer/src/render/FileRegistry.js |  91 +++++++
 .../src/render/components/FormField.js        |  36 ++-
 .../components/form-fields/FilePicker.js      | 108 +++++----
 .../form-js-viewer/src/render/hooks/index.js  |   1 +
 .../hooks/useBooleanExpressionEvaluation.js   |  21 ++
 .../render/hooks/useExpressionEvaluation.js   |   5 +-
 .../src/render/hooks/useService.js            |   6 +
 packages/form-js-viewer/src/render/index.js   |   2 +
 .../src/util/constants/FilePickerConstants.js |   3 +
 .../form-js-viewer/src/util/expressions.js    |   5 +-
 .../extractFileReferencesFromRemovedData.js   |  33 +++
 .../core/FormFieldInstanceRegistry.spec.js    | 222 ++++++------------
 .../form-fields/Dynamiclist.spec.js           |  15 +-
 .../components/form-fields/FilePicker.spec.js |  89 +++++--
 .../render/components/helper/mocks/index.js   |  25 ++
 24 files changed, 520 insertions(+), 305 deletions(-)
 create mode 100644 packages/form-js-viewer/src/render/FileRegistry.js
 create mode 100644 packages/form-js-viewer/src/render/hooks/useBooleanExpressionEvaluation.js
 create mode 100644 packages/form-js-viewer/src/util/constants/FilePickerConstants.js
 create mode 100644 packages/form-js-viewer/src/util/extractFileReferencesFromRemovedData.js

diff --git a/packages/form-js-carbon-styles/src/carbon-styles.js b/packages/form-js-carbon-styles/src/carbon-styles.js
index 8c5fbeeb1..80c25f412 100644
--- a/packages/form-js-carbon-styles/src/carbon-styles.js
+++ b/packages/form-js-carbon-styles/src/carbon-styles.js
@@ -676,7 +676,8 @@ const RADIO_STYLES = css`
 
 const BUTTON_STYLES = css`
   .fjs-container {
-    .fjs-form-field.fjs-form-field-button .fjs-button {
+    .fjs-form-field.fjs-form-field-button .fjs-button,
+    .fjs-form-field.fjs-form-field-filepicker .fjs-button {
       font-size: var(--cds-body-short-01-font-size);
       font-weight: var(--cds-body-short-01-font-weight);
       line-height: var(--cds-body-short-01-line-height);
diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss
index 3e43f4f8b..5d5df95e1 100644
--- a/packages/form-js-carbon-styles/src/carbon-styles.scss
+++ b/packages/form-js-carbon-styles/src/carbon-styles.scss
@@ -795,7 +795,8 @@
 // Button styles /////////////
 
 .fjs-container {
-  .fjs-form-field.fjs-form-field-button .fjs-button {
+  .fjs-form-field.fjs-form-field-button .fjs-button,
+  .fjs-form-field.fjs-form-field-filepicker .fjs-button {
     font-size: var(--cds-body-short-01-font-size);
     font-weight: var(--cds-body-short-01-font-weight);
     line-height: var(--cds-body-short-01-line-height);
diff --git a/packages/form-js-carbon-styles/test/spec/complex.json b/packages/form-js-carbon-styles/test/spec/complex.json
index 9c12838c6..35fc9626e 100644
--- a/packages/form-js-carbon-styles/test/spec/complex.json
+++ b/packages/form-js-carbon-styles/test/spec/complex.json
@@ -643,6 +643,12 @@
       "height": 30,
       "id": "Field_1a82jjsdasd"
     },
+    {
+      "type": "filepicker",
+      "key": "filepicker",
+      "accept": ".png,.jpg",
+      "multiple": true
+    },
     {
       "action": "reset",
       "label": "reset",
diff --git a/packages/form-js-playground/src/components/PlaygroundRoot.js b/packages/form-js-playground/src/components/PlaygroundRoot.js
index b89a3040c..1a4e3347f 100644
--- a/packages/form-js-playground/src/components/PlaygroundRoot.js
+++ b/packages/form-js-playground/src/components/PlaygroundRoot.js
@@ -140,7 +140,8 @@ export function PlaygroundRoot(config) {
 
     // pipe viewer changes to output data editor
     formViewer.on('changed', updateOutputData);
-    formViewer.on('formFieldInstanceRegistry.changed', updateOutputData);
+    formViewer.on('formFieldInstance.added', updateOutputData);
+    formViewer.on('formFieldInstance.removed', updateOutputData);
 
     inputDataEditor.on('changed', (event) => {
       try {
diff --git a/packages/form-js-playground/test/spec/form.json b/packages/form-js-playground/test/spec/form.json
index 1dcf0f7c9..aaf4b2b61 100644
--- a/packages/form-js-playground/test/spec/form.json
+++ b/packages/form-js-playground/test/spec/form.json
@@ -1,6 +1,12 @@
 {
   "$schema": "../../../form-json-schema/resources/schema.json",
   "components": [
+    {
+      "type": "filepicker",
+      "key": "filepicker",
+      "accept": ".png,.jpg",
+      "multiple": true
+    },
     {
       "type": "expression",
       "key": "expressionResult",
diff --git a/packages/form-js-viewer/src/Form.js b/packages/form-js-viewer/src/Form.js
index 07d7572c4..9653358c5 100644
--- a/packages/form-js-viewer/src/Form.js
+++ b/packages/form-js-viewer/src/Form.js
@@ -153,7 +153,7 @@ export class Form {
   /**
    * Submit the form, triggering all field validations.
    *
-   * @returns { { data: Data, errors: Errors } }
+   * @returns { { data: Data, errors: Errors, files: Map<string, File[]> } }
    */
   submit() {
     const { properties } = this._getState();
@@ -168,9 +168,12 @@ export class Form {
 
     const errors = this.validate();
 
+    const files = this.get('fileRegistry').getAllFiles();
+
     const result = {
       data,
       errors,
+      files,
     };
 
     this._emit('submit', result);
diff --git a/packages/form-js-viewer/src/core/FormFieldInstanceRegistry.js b/packages/form-js-viewer/src/core/FormFieldInstanceRegistry.js
index 57e4e083f..0eff3673c 100644
--- a/packages/form-js-viewer/src/core/FormFieldInstanceRegistry.js
+++ b/packages/form-js-viewer/src/core/FormFieldInstanceRegistry.js
@@ -9,36 +9,50 @@ export class FormFieldInstanceRegistry {
     eventBus.on('form.clear', () => this.clear());
   }
 
-  add(instance) {
-    const { id, expressionContextInfo, valuePath, indexes } = instance;
-
-    const instanceId = [id, ...Object.values(indexes || {})].join('_');
-
-    if (this._formFieldInstances[instanceId]) {
-      throw new Error('this form field instance is already registered');
+  syncInstance(instanceId, formFieldInfo) {
+    const { hidden, ...restInfo } = formFieldInfo;
+
+    const isInstanceExpected = !hidden;
+    const doesInstanceExist = this._formFieldInstances[instanceId];
+
+    if (isInstanceExpected && !doesInstanceExist) {
+      this._formFieldInstances[instanceId] = {
+        instanceId,
+        ...restInfo,
+      };
+
+      this._eventBus.fire('formFieldInstance.added', { instanceId });
+    } else if (!isInstanceExpected && doesInstanceExist) {
+      delete this._formFieldInstances[instanceId];
+
+      this._eventBus.fire('formFieldInstance.removed', { instanceId });
+    } else if (isInstanceExpected && doesInstanceExist) {
+      const wasInstanceChaged = Object.keys(restInfo).some((key) => {
+        return this._formFieldInstances[instanceId][key] !== restInfo[key];
+      });
+
+      if (wasInstanceChaged) {
+        this._formFieldInstances[instanceId] = {
+          instanceId,
+          ...restInfo,
+        };
+
+        this._eventBus.fire('formFieldInstance.changed', { instanceId });
+      }
     }
 
-    this._formFieldInstances[instanceId] = {
-      id,
-      instanceId,
-      expressionContextInfo,
-      valuePath,
-      indexes,
-    };
-
-    this._eventBus.fire('formFieldInstanceRegistry.changed', { instanceId, action: 'added' });
-
     return instanceId;
   }
 
-  remove(instanceId) {
-    if (!this._formFieldInstances[instanceId]) {
-      return;
+  cleanupInstance(instanceId) {
+    if (this._formFieldInstances[instanceId]) {
+      delete this._formFieldInstances[instanceId];
+      this._eventBus.fire('formFieldInstance.removed', { instanceId });
     }
+  }
 
-    delete this._formFieldInstances[instanceId];
-
-    this._eventBus.fire('formFieldInstanceRegistry.changed', { instanceId, action: 'removed' });
+  get(instanceId) {
+    return this._formFieldInstances[instanceId];
   }
 
   getAll() {
diff --git a/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js b/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js
index 04a184f61..72c8bd64f 100644
--- a/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js
+++ b/packages/form-js-viewer/src/features/expressionLanguage/ConditionChecker.js
@@ -84,11 +84,17 @@ export class ConditionChecker {
         // if we have a hidden repeatable field, and the data structure allows, we clear it directly at the root and stop recursion
         if (context.isHidden && isRepeatable) {
           context.preventRecursion = true;
+          this._eventBus.fire('conditionChecker.remove', {
+            item: { [field.key]: get(workingData, getFilterPath(field, indexes)) },
+          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
 
         // for simple leaf fields, we always clear
         if (context.isHidden && isClosed) {
+          this._eventBus.fire('conditionChecker.remove', {
+            item: { [field.key]: get(workingData, getFilterPath(field, indexes)) },
+          });
           this._cleanlyClearDataAtPath(getFilterPath(field, indexes), workingData);
         }
       });
diff --git a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
index c9a9eba25..329552bd8 100644
--- a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
+++ b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
@@ -15,11 +15,16 @@ import { useScrollIntoView } from '../../render/hooks';
 import classNames from 'classnames';
 
 export class RepeatRenderManager {
-  constructor(form, formFields, formFieldRegistry, pathRegistry) {
+  constructor(form, formFields, formFieldRegistry, pathRegistry, eventBus) {
     this._form = form;
+    /** @type {import('../../render/FormFields').FormFields} */
     this._formFields = formFields;
+    /** @type {import('../../core/FormFieldRegistry').FormFieldRegistry} */
     this._formFieldRegistry = formFieldRegistry;
+    /** @type {import('../../core/PathRegistry').PathRegistry} */
     this._pathRegistry = pathRegistry;
+    /** @type {import('../../core/EventBus').EventBus} */
+    this._eventBus = eventBus;
     this.Repeater = this.Repeater.bind(this);
     this.RepeatFooter = this.RepeatFooter.bind(this);
   }
@@ -58,12 +63,14 @@ export class RepeatRenderManager {
     const hasChildren = repeaterField.components && repeaterField.components.length > 0;
     const showRemove = repeaterField.allowAddRemove && hasChildren;
 
-    const displayValues = isCollapsed ? values.slice(0, nonCollapsedItems) : values;
-    const hiddenValues = isCollapsed ? values.slice(nonCollapsedItems) : [];
-
+    /**
+     * @param {number} index
+     */
     const onDeleteItem = (index) => {
       const updatedValues = values.slice();
-      updatedValues.splice(index, 1);
+      const removedItem = updatedValues.splice(index, 1)[0];
+
+      this._eventBus.fire('repeatRenderManager.remove', { dataPath, index, item: removedItem });
 
       props.onChange({
         field: repeaterField,
@@ -76,38 +83,24 @@ export class RepeatRenderManager {
 
     return (
       <>
-        {displayValues.map((itemValue, itemIndex) => (
-          <RepetitionScaffold
-            key={itemIndex}
-            itemIndex={itemIndex}
-            itemValue={itemValue}
-            parentExpressionContextInfo={parentExpressionContextInfo}
-            repeaterField={repeaterField}
-            RowsRenderer={RowsRenderer}
-            indexes={indexes}
-            onDeleteItem={onDeleteItem}
-            showRemove={showRemove}
-            {...restProps}
-          />
-        ))}
-        {hiddenValues.length > 0 ? (
-          <div className="fjs-repeat-row-collapsed">
-            {hiddenValues.map((itemValue, itemIndex) => (
-              <RepetitionScaffold
-                key={itemIndex}
-                itemIndex={itemIndex + nonCollapsedItems}
-                itemValue={itemValue}
-                parentExpressionContextInfo={parentExpressionContextInfo}
-                repeaterField={repeaterField}
-                RowsRenderer={RowsRenderer}
-                indexes={indexes}
-                onDeleteItem={onDeleteItem}
-                showRemove={showRemove}
-                {...restProps}
-              />
-            ))}
+        {values.map((itemValue, itemIndex) => (
+          <div
+            class={classNames({
+              'fjs-repeat-row-collapsed': isCollapsed ? itemIndex >= nonCollapsedItems : false,
+            })}>
+            <RepetitionScaffold
+              itemIndex={itemIndex}
+              itemValue={itemValue}
+              parentExpressionContextInfo={parentExpressionContextInfo}
+              repeaterField={repeaterField}
+              RowsRenderer={RowsRenderer}
+              indexes={indexes}
+              onDeleteItem={onDeleteItem}
+              showRemove={showRemove}
+              {...restProps}
+            />
           </div>
-        ) : null}
+        ))}
       </>
     );
   }
@@ -146,6 +139,8 @@ export class RepeatRenderManager {
 
       shouldScroll.current = true;
 
+      this._eventBus.fire('repeatRenderManager.add', { dataPath, index: updatedValues.length - 1, item: newItem });
+
       props.onChange({
         value: updatedValues,
       });
@@ -186,7 +181,7 @@ export class RepeatRenderManager {
           <button type="button" class="fjs-repeat-render-collapse" onClick={toggle}>
             {isCollapsed ? (
               <>
-                <ExpandSvg /> {`Expand all (${values.length})`}
+                <ExpandSvg /> {`Expand all (${values.length - 1})`}
               </>
             ) : (
               <>
@@ -277,4 +272,4 @@ const RepetitionScaffold = (props) => {
   );
 };
 
-RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry'];
+RepeatRenderManager.$inject = ['form', 'formFields', 'formFieldRegistry', 'pathRegistry', 'eventBus'];
diff --git a/packages/form-js-viewer/src/render/FileRegistry.js b/packages/form-js-viewer/src/render/FileRegistry.js
new file mode 100644
index 000000000..bbc70e569
--- /dev/null
+++ b/packages/form-js-viewer/src/render/FileRegistry.js
@@ -0,0 +1,91 @@
+import { extractFileReferencesFromRemovedData } from '../util/extractFileReferencesFromRemovedData';
+
+const fileRegistry = Symbol('fileRegistry');
+const eventBusSymbol = Symbol('eventBus');
+const formFieldRegistrySymbol = Symbol('formFieldRegistry');
+const formFieldInstanceRegistrySymbol = Symbol('formFieldInstanceRegistry');
+const EMPTY_ARRAY = [];
+
+class FileRegistry {
+  /**
+   * @param {import('../core/EventBus').EventBus} eventBus
+   * @param {import('../core/FormFieldRegistry').FormFieldRegistry} formFieldRegistry
+   * @param {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} formFieldInstanceRegistry
+   */
+  constructor(eventBus, formFieldRegistry, formFieldInstanceRegistry) {
+    /** @type {Map<string, File[]>} */
+    this[fileRegistry] = new Map();
+    /** @type {import('../core/EventBus').EventBus} */
+    this[eventBusSymbol] = eventBus;
+    /** @type {import('../core/FormFieldRegistry').FormFieldRegistry} */
+    this[formFieldRegistrySymbol] = formFieldRegistry;
+    /** @type {import('../core/FormFieldInstanceRegistry').FormFieldInstanceRegistry} */
+    this[formFieldInstanceRegistrySymbol] = formFieldInstanceRegistry;
+
+    const removeFileHandler = ({ item }) => {
+      const fileReferences = extractFileReferencesFromRemovedData(item);
+
+      // Remove all file references from the registry
+      fileReferences.forEach((fileReference) => {
+        this.deleteFiles(fileReference);
+      });
+    };
+
+    eventBus.on('form.clear', () => this.clear());
+    eventBus.on('conditionChecker.remove', removeFileHandler);
+    eventBus.on('repeatRenderManager.remove', removeFileHandler);
+  }
+
+  /**
+   * @param {string} id
+   * @param {File[]} files
+   */
+  setFiles(id, files) {
+    this[fileRegistry].set(id, files);
+  }
+
+  /**
+   * @param {string} id
+   * @returns {File[]}
+   */
+  getFiles(id) {
+    return this[fileRegistry].get(id) || EMPTY_ARRAY;
+  }
+
+  /**
+   * @returns {string[]}
+   */
+  getKeys() {
+    return Array.from(this[fileRegistry].keys());
+  }
+
+  /**
+   * @param {string} id
+   * @returns {boolean}
+   */
+  hasKey(id) {
+    return this[fileRegistry].has(id);
+  }
+
+  /**
+   * @param {string} id
+   */
+  deleteFiles(id) {
+    this[fileRegistry].delete(id);
+  }
+
+  /**
+   * @returns {Map<string, File[]>}
+   */
+  getAllFiles() {
+    return new Map(this[fileRegistry]);
+  }
+
+  clear() {
+    this[fileRegistry].clear();
+  }
+}
+
+FileRegistry.$inject = ['eventBus', 'formFieldRegistry', 'formFieldInstanceRegistry'];
+
+export { FileRegistry };
diff --git a/packages/form-js-viewer/src/render/components/FormField.js b/packages/form-js-viewer/src/render/components/FormField.js
index ca9c6be94..707c438ae 100644
--- a/packages/form-js-viewer/src/render/components/FormField.js
+++ b/packages/form-js-viewer/src/render/components/FormField.js
@@ -1,4 +1,6 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks';
+import Ids from 'ids';
+
+import { useRef, useCallback, useContext, useEffect, useMemo, useState } from 'preact/hooks';
 import isEqual from 'lodash/isEqual';
 
 import { get } from 'min-dash';
@@ -10,8 +12,11 @@ import { useCondition, useReadonly, useService } from '../hooks';
 import { gridColumnClasses, prefixId } from './Util';
 
 const noop = () => false;
+const ids = new Ids([32, 36, 1]);
 
 export function FormField(props) {
+  const instanceIdRef = useRef(ids.next());
+
   const { field, indexes, onChange: _onChange } = props;
 
   const formFields = useService('formFields'),
@@ -53,26 +58,31 @@ export function FormField(props) {
 
   const hidden = useCondition((field.conditional && field.conditional.hide) || null);
 
-  const fieldInstance = useMemo(
-    () => ({
+  const instanceId = useMemo(() => {
+    if (!formFieldInstanceRegistry) {
+      return null;
+    }
+
+    return formFieldInstanceRegistry.syncInstance(instanceIdRef.current, {
       id: field.id,
       expressionContextInfo: localExpressionContext,
       valuePath,
+      value,
       indexes,
-    }),
-    [field.id, valuePath, localExpressionContext, indexes],
-  );
+      hidden,
+    });
+  }, [formFieldInstanceRegistry, field.id, localExpressionContext, valuePath, value, indexes, hidden]);
+
+  const fieldInstance = instanceId ? formFieldInstanceRegistry.get(instanceId) : null;
 
-  // register form field instance
+  // cleanup the instance on unmount
   useEffect(() => {
-    if (formFieldInstanceRegistry && !hidden) {
-      const instanceId = formFieldInstanceRegistry.add(fieldInstance);
+    const instanceId = instanceIdRef.current;
 
-      return () => {
-        formFieldInstanceRegistry.remove(instanceId);
-      };
+    if (formFieldInstanceRegistry) {
+      return () => formFieldInstanceRegistry.cleanupInstance(instanceId);
     }
-  }, [fieldInstance, formFieldInstanceRegistry, hidden]);
+  }, [formFieldInstanceRegistry]);
 
   // ensures the initial validation behavior can be re-triggered upon form reset
   useEffect(() => {
diff --git a/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js b/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js
index cb644d3cd..06f87188c 100644
--- a/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js
+++ b/packages/form-js-viewer/src/render/components/form-fields/FilePicker.js
@@ -1,10 +1,14 @@
+import Ids from 'ids';
 import { formFieldClasses } from '../Util';
 import { Label } from '../Label';
 import { Errors } from '../Errors';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { useService, useSingleLineTemplateEvaluation } from '../../hooks';
+import { useEffect, useRef } from 'preact/hooks';
+import { useService, useSingleLineTemplateEvaluation, useBooleanExpressionEvaluation } from '../../hooks';
+import { FILE_PICKER_FILE_KEY_PREFIX } from '../../../util/constants/FilePickerConstants';
 
 const type = 'filepicker';
+const ids = new Ids();
+const EMPTY_ARRAY = [];
 
 /**
  * @typedef Props
@@ -18,7 +22,8 @@ const type = 'filepicker';
  * @property {string} field.id
  * @property {string} [field.label]
  * @property {string} [field.accept]
- * @property {boolean} [field.multiple]
+ * @property {string|boolean} [field.multiple]
+ * @property {string} [value]
  *
  * @param {Props} props
  * @returns {import("preact").JSX.Element}
@@ -26,35 +31,55 @@ const type = 'filepicker';
 export function FilePicker(props) {
   /** @type {import("preact/hooks").Ref<HTMLInputElement>} */
   const fileInputRef = useRef(null);
-  /** @type {[File[],import("preact/hooks").StateUpdater<File[]>]} */
-  const [selectedFiles, setSelectedFiles] = useState([]);
-  const eventBus = useService('eventBus');
-  const { field, onChange, domId, errors = [], disabled, readonly, required } = props;
-  const { label, multiple = '', accept = '', id } = field;
+  /** @type {import('../../FileRegistry').FileRegistry} */
+  const fileRegistry = useService('fileRegistry', false);
+  const { field, onChange, domId, errors = [], disabled, readonly, required, value: filesKey = '' } = props;
+  const { label, multiple = false, accept = '' } = field;
+  /** @type {string} */
   const evaluatedAccept = useSingleLineTemplateEvaluation(accept);
-  const evaluatedMultiple =
-    useSingleLineTemplateEvaluation(typeof multiple === 'string' ? multiple : multiple.toString()) === 'true';
+  const evaluatedMultiple = useBooleanExpressionEvaluation(multiple);
   const errorMessageId = `${domId}-error-message`;
+  /** @type {File[]} */
+  const selectedFiles = fileRegistry === null ? EMPTY_ARRAY : fileRegistry.getFiles(filesKey);
 
   useEffect(() => {
-    const reset = () => {
-      setSelectedFiles([]);
-      onChange({
-        value: null,
-      });
-    };
-
-    eventBus.on('import.done', reset);
-    eventBus.on('reset', reset);
-
-    return () => {
-      eventBus.off('import.done', reset);
-      eventBus.off('reset', reset);
-    };
-  }, [eventBus, onChange]);
+    if (filesKey && fileRegistry !== null && !fileRegistry.hasKey(filesKey)) {
+      onChange({ value: null });
+    }
+  }, [fileRegistry, filesKey, onChange, selectedFiles.length]);
+
+  useEffect(() => {
+    const data = new DataTransfer();
+    selectedFiles.forEach((file) => data.items.add(file));
+    fileInputRef.current.files = data.files;
+  }, [selectedFiles]);
+
+  /**
+   * @type import("preact").JSX.GenericEventHandler<HTMLInputElement>
+   */
+  const onFileChange = (event) => {
+    const input = /** @type {HTMLInputElement} */ (event.target);
+
+    // if we have an associated file key but no files are selected, clear the file key and associated files
+    if ((input.files === null || input.files.length === 0) && filesKey !== '') {
+      fileRegistry.deleteFiles(filesKey);
+      onChange({ value: null });
+      return;
+    }
+
+    const files = Array.from(input.files);
+
+    // ensure fileKey exists
+    const updatedFilesKey = filesKey || ids.nextPrefixed(FILE_PICKER_FILE_KEY_PREFIX);
+
+    fileRegistry.setFiles(updatedFilesKey, files);
+    onChange({ value: updatedFilesKey });
+  };
+
+  const isInputDisabled = disabled || readonly || fileRegistry === null;
 
   return (
-    <div class={formFieldClasses(type, { errors, disabled, readonly })}>
+    <div className={formFieldClasses(type, { errors, disabled, readonly })}>
       <Label htmlFor={domId} label={label} required={required} />
       <input
         type="file"
@@ -62,33 +87,17 @@ export function FilePicker(props) {
         ref={fileInputRef}
         id={domId}
         name={domId}
-        multiple={evaluatedMultiple === false ? undefined : evaluatedMultiple}
-        accept={evaluatedAccept === '' ? undefined : evaluatedAccept}
-        onChange={(event) => {
-          const input = /** @type {HTMLInputElement} */ (event.target);
-
-          if (input.files === null || input.files.length === 0) {
-            onChange({
-              value: null,
-            });
-            return;
-          }
-
-          const files = Array.from(input.files);
-
-          onChange({
-            value: `${id}_value_key`,
-          });
-
-          setSelectedFiles(files);
-        }}
+        disabled={isInputDisabled}
+        multiple={evaluatedMultiple || undefined}
+        accept={evaluatedAccept || undefined}
+        onChange={onFileChange}
       />
       <div className="fjs-filepicker-container">
         <button
           type="button"
-          disabled={disabled}
+          disabled={isInputDisabled}
           readonly={readonly}
-          class="fjs-button"
+          className="fjs-button fjs-filepicker-button"
           onClick={() => {
             fileInputRef.current.click();
           }}>
@@ -107,9 +116,6 @@ FilePicker.config = {
   label: 'File picker',
   group: 'basic-input',
   emptyValue: null,
-  sanitizeValue: ({ value }) => {
-    return value;
-  },
   create: (options = {}) => ({ ...options }),
 };
 
diff --git a/packages/form-js-viewer/src/render/hooks/index.js b/packages/form-js-viewer/src/render/hooks/index.js
index 2185d0324..87d76e274 100644
--- a/packages/form-js-viewer/src/render/hooks/index.js
+++ b/packages/form-js-viewer/src/render/hooks/index.js
@@ -5,6 +5,7 @@ export { useSecurityAttributesMap } from './useSecurityAttributesMap';
 export { useGetLabelCorrelation } from './useGetLabelCorrelation';
 export { useScrollIntoView } from './useScrollIntoView';
 export { useExpressionEvaluation } from './useExpressionEvaluation';
+export { useBooleanExpressionEvaluation } from './useBooleanExpressionEvaluation';
 export { useFilteredFormData } from './useFilteredFormData';
 export { useKeyDownAction } from './useKeyDownAction';
 export { useReadonly } from './useReadonly';
diff --git a/packages/form-js-viewer/src/render/hooks/useBooleanExpressionEvaluation.js b/packages/form-js-viewer/src/render/hooks/useBooleanExpressionEvaluation.js
new file mode 100644
index 000000000..513a58896
--- /dev/null
+++ b/packages/form-js-viewer/src/render/hooks/useBooleanExpressionEvaluation.js
@@ -0,0 +1,21 @@
+import { useService } from './useService';
+import { LocalExpressionContext } from '../context/LocalExpressionContext';
+import { useContext, useMemo } from 'preact/hooks';
+import { runExpressionEvaluation } from '../../util/expressions';
+
+/**
+ * If the value is a valid expression, we evaluate it. Otherwise, we continue with the value as-is.
+ * If the resulting value isn't a boolean, we return 'false'
+ * The function is memoized to minimize re-renders.
+ *
+ * @param {boolean | string} value - A static boolean or expression to evaluate.
+ * @returns {boolean} - Evaluated boolean result.
+ */
+export function useBooleanExpressionEvaluation(value) {
+  const expressionLanguage = useService('expressionLanguage');
+  const expressionContextInfo = useContext(LocalExpressionContext);
+  return useMemo(() => {
+    const evaluationResult = runExpressionEvaluation(expressionLanguage, value, expressionContextInfo);
+    return typeof evaluationResult === 'boolean' ? evaluationResult : false;
+  }, [expressionLanguage, expressionContextInfo, value]);
+}
diff --git a/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js b/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js
index 9741ddea9..0343fa211 100644
--- a/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js
+++ b/packages/form-js-viewer/src/render/hooks/useExpressionEvaluation.js
@@ -4,11 +4,10 @@ import { useContext, useMemo } from 'preact/hooks';
 import { runExpressionEvaluation } from '../../util/expressions';
 
 /**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
+ * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
  * The function is memoized to minimize re-renders.
  *
- * @param {string} value - The string to evaluate.
+ * @param {any} value - A static value or expression to evaluate.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
 export function useExpressionEvaluation(value) {
diff --git a/packages/form-js-viewer/src/render/hooks/useService.js b/packages/form-js-viewer/src/render/hooks/useService.js
index e171aad4b..88726ef8f 100644
--- a/packages/form-js-viewer/src/render/hooks/useService.js
+++ b/packages/form-js-viewer/src/render/hooks/useService.js
@@ -2,6 +2,12 @@ import { useContext } from 'preact/hooks';
 
 import { FormContext } from '../context';
 
+/**
+ * @template T
+ * @param {string} type
+ * @param {boolean} [strict=true]
+ * @returns {T | null}
+ */
 export function useService(type, strict) {
   const { getService } = useContext(FormContext);
 
diff --git a/packages/form-js-viewer/src/render/index.js b/packages/form-js-viewer/src/render/index.js
index 3362c1f3d..52bc60c69 100644
--- a/packages/form-js-viewer/src/render/index.js
+++ b/packages/form-js-viewer/src/render/index.js
@@ -1,5 +1,6 @@
 import { FormFields } from './FormFields';
 import { Renderer } from './Renderer';
+import { FileRegistry } from './FileRegistry';
 
 export { FormFields };
 
@@ -11,4 +12,5 @@ export const RenderModule = {
   __init__: ['formFields', 'renderer'],
   formFields: ['type', FormFields],
   renderer: ['type', Renderer],
+  fileRegistry: ['type', FileRegistry],
 };
diff --git a/packages/form-js-viewer/src/util/constants/FilePickerConstants.js b/packages/form-js-viewer/src/util/constants/FilePickerConstants.js
new file mode 100644
index 000000000..c63c5ee3b
--- /dev/null
+++ b/packages/form-js-viewer/src/util/constants/FilePickerConstants.js
@@ -0,0 +1,3 @@
+const FILE_PICKER_FILE_KEY_PREFIX = 'files::';
+
+export { FILE_PICKER_FILE_KEY_PREFIX };
diff --git a/packages/form-js-viewer/src/util/expressions.js b/packages/form-js-viewer/src/util/expressions.js
index 81640b281..7716d3890 100644
--- a/packages/form-js-viewer/src/util/expressions.js
+++ b/packages/form-js-viewer/src/util/expressions.js
@@ -18,11 +18,10 @@ export function buildExpressionContext(context) {
 }
 
 /**
- * Evaluate a string based on the expressionLanguage and context information.
- * If the string is not an expression, it is returned as is.
+ * If the value is a valid expression, it is evaluated and returned. Otherwise, it is returned as-is.
  *
  * @param {any} expressionLanguage - The expression language to use.
- * @param {string} value - The string to evaluate.
+ * @param {any} value - The static value or expression to evaluate.
  * @param {Object} expressionContextInfo - The context information to use.
  * @returns {any} - Evaluated value or the original value if not an expression.
  */
diff --git a/packages/form-js-viewer/src/util/extractFileReferencesFromRemovedData.js b/packages/form-js-viewer/src/util/extractFileReferencesFromRemovedData.js
new file mode 100644
index 000000000..75ab50184
--- /dev/null
+++ b/packages/form-js-viewer/src/util/extractFileReferencesFromRemovedData.js
@@ -0,0 +1,33 @@
+import { FILE_PICKER_FILE_KEY_PREFIX } from './constants/FilePickerConstants';
+
+/**
+ * @typedef {Record<PropertyKey, unknown>} RemovedData
+ * @param {RemovedData} removedData
+ * @returns {string[]}
+ */
+const extractFileReferencesFromRemovedData = (removedData) => {
+  /** @type {string[]} */
+  const fileReferences = [];
+
+  if (removedData === null) {
+    return fileReferences;
+  }
+
+  Object.values(removedData).forEach((value) => {
+    if (value === null) {
+      return;
+    }
+
+    if (typeof value === 'object') {
+      fileReferences.push(...extractFileReferencesFromRemovedData(/** @type {RemovedData} */ (value)));
+    } else if (Array.isArray(value)) {
+      fileReferences.push(...value.map(extractFileReferencesFromRemovedData).flat());
+    } else if (typeof value === 'string' && value.startsWith(FILE_PICKER_FILE_KEY_PREFIX)) {
+      fileReferences.push(value);
+    }
+  });
+
+  return fileReferences;
+};
+
+export { extractFileReferencesFromRemovedData };
diff --git a/packages/form-js-viewer/test/spec/core/FormFieldInstanceRegistry.spec.js b/packages/form-js-viewer/test/spec/core/FormFieldInstanceRegistry.spec.js
index c7a1d03c2..e44037322 100644
--- a/packages/form-js-viewer/test/spec/core/FormFieldInstanceRegistry.spec.js
+++ b/packages/form-js-viewer/test/spec/core/FormFieldInstanceRegistry.spec.js
@@ -7,8 +7,8 @@ describe('FormFieldInstanceRegistry', function () {
     getForm().destroy();
   });
 
-  describe('#add', function () {
-    it('should add form field', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
+  describe('#syncInstance', function () {
+    it('should add form field instance on sync', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
       // given
       const formField = {
         id: 'foo',
@@ -16,7 +16,7 @@ describe('FormFieldInstanceRegistry', function () {
 
       // when
       formFieldRegistry.add(formField);
-      const key = formFieldInstanceRegistry.add({
+      const key = formFieldInstanceRegistry.syncInstance('instanceKey', {
         id: formField.id,
         expressionContextInfo: {},
         valuePath: ['foo'],
@@ -25,199 +25,111 @@ describe('FormFieldInstanceRegistry', function () {
 
       // then
       expect(formFieldInstanceRegistry.getAll()).to.have.length(1);
-      expect(key).to.equal('foo');
+      expect(key).to.equal('instanceKey');
     }));
 
-    it('should use indexes for instance ID', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
+    it('should not add form field instance on hidden', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
       // given
-      const formField = {
-        id: 'foo',
-      };
+      formFieldRegistry.add(simpleFormField);
 
       // when
-      formFieldRegistry.add(formField);
-      const key = formFieldInstanceRegistry.add({
-        id: formField.id,
-        expressionContextInfo: {},
-        valuePath: ['foo'],
-        indexes: {
-          bar: 2,
-        },
-      });
+      formFieldInstanceRegistry.syncInstance('instanceKey', { ...simpleInstance, hidden: true });
 
       // then
-      expect(formFieldInstanceRegistry.getAll()).to.have.length(1);
-      expect(key).to.equal('foo_2');
+      expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
     }));
 
-    it('should throw error if form field with ID already exists', inject(function (
-      formFieldRegistry,
-      formFieldInstanceRegistry,
-    ) {
+    it('should remove form field instance on hidden', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
       // given
-      const formField = {
-        id: 'foo',
-      };
-
-      formFieldRegistry.add(formField);
-      formFieldInstanceRegistry.add({
-        id: formField.id,
-        expressionContextInfo: {},
-        valuePath: ['foo'],
-        indexes: {},
-      });
+      formFieldRegistry.add(simpleFormField);
+      formFieldInstanceRegistry.syncInstance('instanceKey', simpleInstance);
 
       // when
+      formFieldInstanceRegistry.syncInstance('instanceKey', { ...simpleInstance, hidden: true });
+
       // then
-      expect(() =>
-        formFieldInstanceRegistry.add({
-          id: formField.id,
-          expressionContextInfo: {},
-          valuePath: ['foo'],
-          indexes: {},
-        }),
-      ).to.throw('this form field instance is already registered');
+      expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
     }));
 
-    it('should not throw error when two form fields with same ID with different indexes are added', inject(function (
-      formFieldRegistry,
-      formFieldInstanceRegistry,
-    ) {
+    it('should sync separate instances', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
       // given
-      const formField = {
-        id: 'foo',
-      };
-
-      formFieldRegistry.add(formField);
-      formFieldInstanceRegistry.add({
-        id: formField.id,
-        expressionContextInfo: {},
-        valuePath: ['foo'],
-        indexes: { bar: 1 },
-      });
+      formFieldRegistry.add(simpleFormField);
 
       // when
+      formFieldInstanceRegistry.syncInstance('instanceKey1', simpleInstance);
+      formFieldInstanceRegistry.syncInstance('instanceKey2', simpleInstance);
+
       // then
-      expect(() =>
-        formFieldInstanceRegistry.add({
-          id: formField.id,
-          expressionContextInfo: {},
-          valuePath: ['foo'],
-          indexes: { bar: 2 },
-        }),
-      ).not.to.throw();
+      const savedInstances = formFieldInstanceRegistry.getAll();
+      expect(savedInstances).to.have.length(2);
+      expect(savedInstances.map(({ id }) => id)).to.eql([simpleFormField.id, simpleFormField.id]);
+      expect(savedInstances.map(({ instanceId }) => instanceId)).to.eql(['instanceKey1', 'instanceKey2']);
     }));
   });
 
-  describe('#remove', function () {
-    let formField;
-    let formFieldInstanceKey;
-
-    beforeEach(inject(function (formFieldRegistry, formFieldInstanceRegistry) {
-      formField = {
-        id: 'foo',
-      };
-
-      formFieldRegistry.add(formField);
-      formFieldInstanceKey = formFieldInstanceRegistry.add({
-        id: formField.id,
-        expressionContextInfo: {},
-        valuePath: ['foo'],
-        indexes: {},
-      });
-    }));
+  describe('#clear', function () {
+    it('should clear', inject(function (formFieldInstanceRegistry) {
+      // given
+      formFieldInstanceRegistry.syncInstance('instanceKey', simpleInstance);
 
-    it('should remove form field', inject(function (formFieldInstanceRegistry) {
       // when
-      formFieldInstanceRegistry.remove(formFieldInstanceKey);
+      formFieldInstanceRegistry.clear();
 
       // then
       expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
     }));
-  });
 
-  describe('#getAll', function () {
-    let formField1, formField2;
-
-    beforeEach(inject(function (formFieldRegistry, formFieldInstanceRegistry) {
-      formField1 = {
-        id: 'foo',
-      };
-
-      formFieldRegistry.add(formField1);
-      formFieldInstanceRegistry.add({
-        id: formField1.id,
-        expressionContextInfo: {},
-        valuePath: ['foo'],
-        indexes: {},
-      });
-
-      formField2 = {
-        id: 'bar',
-      };
-
-      formFieldRegistry.add(formField2);
-      formFieldInstanceRegistry.add({
-        id: formField2.id,
-        expressionContextInfo: {},
-        valuePath: ['bar'],
-        indexes: {},
-      });
-    }));
+    it('should clear on form.clear', inject(function (eventBus, formFieldInstanceRegistry) {
+      // given
+      formFieldInstanceRegistry.syncInstance('instanceKey', simpleInstance);
 
-    it('should get all form fields', inject(function (formFieldInstanceRegistry) {
       // when
-      const formFieldInstances = formFieldInstanceRegistry.getAll();
+      eventBus.fire('form.clear');
 
       // then
-      expect(formFieldInstances).to.have.length(2);
-      expect(formFieldInstances.map(({ id }) => id)).to.eql([formField1.id, formField2.id]);
+      expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
     }));
   });
 
-  describe('#clear', function () {
-    let formField1, formField2;
+  it('#cleanupInstance - should remove instance', inject(function (formFieldRegistry, formFieldInstanceRegistry) {
+    // given
+    formFieldRegistry.add(simpleFormField);
+    const formFieldInstanceKey = formFieldInstanceRegistry.syncInstance('instancekey', simpleInstance);
 
-    beforeEach(inject(function (formFieldRegistry, formFieldInstanceRegistry) {
-      formField1 = {
-        id: 'foo',
-      };
+    // when
+    formFieldInstanceRegistry.cleanupInstance(formFieldInstanceKey);
 
-      formFieldRegistry.add(formField1);
-      formFieldInstanceRegistry.add({
-        id: formField1.id,
-        expressionContextInfo: {},
-        valuePath: ['foo'],
-        indexes: {},
-      });
+    // then
+    expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
+  }));
 
-      formField2 = {
-        id: 'bar',
-      };
+  it('#getAllKeyed - should get all keyed', inject(function (formFields, formFieldRegistry, formFieldInstanceRegistry) {
+    // given
+    formFields.get = (type) => (type === 'keyedType' ? { config: { keyed: true } } : { config: { keyed: false } });
+    formFieldRegistry.add(simpleFormField);
+    formFieldRegistry.add({ id: 'bar', type: 'keyedType' });
 
-      formFieldRegistry.add(formField2);
-      formFieldInstanceRegistry.add({
-        id: formField2.id,
-        expressionContextInfo: {},
-        valuePath: ['bar'],
-        indexes: {},
-      });
-    }));
+    formFieldInstanceRegistry.syncInstance('instanceKey1', simpleInstance);
+    formFieldInstanceRegistry.syncInstance('instanceKey2', { ...simpleInstance, id: 'bar' });
 
-    it('should clear', inject(function (formFieldInstanceRegistry) {
-      // when
-      formFieldInstanceRegistry.clear();
+    // when
+    const keyedInstances = formFieldInstanceRegistry.getAllKeyed();
 
-      // then
-      expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
-    }));
+    // then
+    expect(keyedInstances).to.have.length(1);
+    expect(keyedInstances[0].id).to.equal('bar');
+  }));
+});
 
-    it('should clear on form.clear', inject(function (eventBus, formFieldInstanceRegistry) {
-      // when
-      eventBus.fire('form.clear');
+// helpers
 
-      // then
-      expect(formFieldInstanceRegistry.getAll()).to.have.length(0);
-    }));
-  });
-});
+const simpleFormField = {
+  id: 'foo',
+};
+
+const simpleInstance = {
+  id: simpleFormField.id,
+  expressionContextInfo: {},
+  valuePath: ['foo'],
+  indexes: {},
+};
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/Dynamiclist.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/Dynamiclist.spec.js
index 9ca458307..9f7fa769c 100644
--- a/packages/form-js-viewer/test/spec/render/components/form-fields/Dynamiclist.spec.js
+++ b/packages/form-js-viewer/test/spec/render/components/form-fields/Dynamiclist.spec.js
@@ -192,7 +192,13 @@ describe('Dynamic List', () => {
     };
 
     const onChangeSpy = sinon.spy();
-    const { container } = createDynamicList({ field, onChange: onChangeSpy });
+    const { container } = createDynamicList({
+      field,
+      onChange: onChangeSpy,
+      services: {
+        fileRegistry: getMockFileRegistry(),
+      },
+    });
     const removeButtons = container.querySelectorAll('.fjs-repeat-row-remove');
 
     // when
@@ -324,3 +330,10 @@ function createDynamicList({ services, ...restOptions } = {}) {
     },
   );
 }
+
+function getMockFileRegistry() {
+  return {
+    getKeys: sinon.spy(() => []),
+    deleteFiles: sinon.spy(),
+  };
+}
diff --git a/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js b/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js
index dc2ad2b62..e45af3de7 100644
--- a/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js
+++ b/packages/form-js-viewer/test/spec/render/components/form-fields/FilePicker.spec.js
@@ -24,6 +24,9 @@ describe('FilePicker', function () {
         ...defaultField,
         label: 'My files',
       },
+      services: {
+        fileRegistry: getMockFileRegistry(),
+      },
     });
 
     // then
@@ -37,46 +40,72 @@ describe('FilePicker', function () {
     // when
     createFilePicker({
       errors: ['Something went wrong'],
+      services: {
+        fileRegistry: getMockFileRegistry(),
+      },
     });
 
     // then
     expect(screen.getByText('Something went wrong')).to.exist;
   });
 
-  it('should change the label with single file selected', function () {
+  it('should render single file selected', function () {
     // given
     const file = new File([''], 'test.png', { type: 'image/png' });
-    const { container } = createFilePicker();
+    const fileRegistry = getMockFileRegistry();
+    fileRegistry.setFiles(null, [file]);
 
     // when
-
-    fireEvent.change(container.querySelector('input[type="file"]'), {
-      target: {
-        files: [file],
+    createFilePicker({
+      services: {
+        fileRegistry,
       },
     });
 
     // then
-
     expect(screen.getByText('test.png')).to.exist;
   });
 
-  it('should change the label with multiple files selected', function () {
+  it('should render multiple files selected', function () {
     // given
-    const file = new File([''], 'test1.png', { type: 'image/png' });
-    const { container } = createFilePicker();
+    const file1 = new File([''], 'test1.png', { type: 'image/png' });
+    const file2 = new File([''], 'test2.png', { type: 'image/png' });
+    const fileRegistry = getMockFileRegistry();
+    fileRegistry.setFiles(null, [file1, file2]);
+
+    // when
+    createFilePicker({
+      services: {
+        fileRegistry,
+      },
+    });
+
+    // then
+    expect(screen.getByText('2 files selected')).to.exist;
+  });
+
+  it('should set file registry', function () {
+    // given
+    const file = new File([''], 'test.png', { type: 'image/png' });
+    const fileRegistry = getMockFileRegistry();
+
+    const { container } = createFilePicker({
+      services: {
+        fileRegistry,
+      },
+      value: 'files::fileTestId',
+    });
 
     // when
 
     fireEvent.change(container.querySelector('input[type="file"]'), {
       target: {
-        files: [file, file],
+        files: [file],
       },
     });
 
     // then
-
-    expect(screen.getByText('2 files selected')).to.exist;
+    expect(fileRegistry.setFiles).to.have.been.calledWith('files::fileTestId', [file]);
   });
 
   it('should accept multiple files and limit the file types', function () {
@@ -87,6 +116,9 @@ describe('FilePicker', function () {
         accept: 'image/*',
         multiple: true,
       },
+      services: {
+        fileRegistry: getMockFileRegistry(),
+      },
     });
 
     // then
@@ -109,6 +141,9 @@ describe('FilePicker', function () {
         accept: '=mime',
         multiple: '=acceptMultiple',
       },
+      services: {
+        fileRegistry: getMockFileRegistry(),
+      },
     });
 
     // then
@@ -145,7 +180,11 @@ describe('FilePicker', function () {
       // given
       this.timeout(10000);
 
-      const { container } = createFilePicker();
+      const { container } = createFilePicker({
+        services: {
+          fileRegistry: getMockFileRegistry(),
+        },
+      });
 
       // then
       await expectNoViolations(container);
@@ -158,6 +197,9 @@ describe('FilePicker', function () {
       const { container } = createFilePicker({
         value: true,
         readonly: true,
+        services: {
+          fileRegistry: getMockFileRegistry(),
+        },
       });
 
       // then
@@ -171,6 +213,9 @@ describe('FilePicker', function () {
       const { container } = createFilePicker({
         value: true,
         errors: ['Something went wrong'],
+        services: {
+          fileRegistry: getMockFileRegistry(),
+        },
       });
 
       // then
@@ -190,6 +235,9 @@ function createFilePicker({ services, ...restOptions } = {}) {
   const options = {
     domId: 'test-filepicker',
     field: defaultField,
+    fieldInstance: {
+      valuePath: [defaultField.id],
+    },
     onChange: () => {},
     ...restOptions,
   };
@@ -205,6 +253,7 @@ function createFilePicker({ services, ...restOptions } = {}) {
         onChange={options.onChange}
         onBlur={options.onBlur}
         value={options.value}
+        fieldInstance={options.fieldInstance}
       />
     </MockFormContext>,
     {
@@ -212,3 +261,15 @@ function createFilePicker({ services, ...restOptions } = {}) {
     },
   );
 }
+
+function getMockFileRegistry() {
+  let _files = [];
+  return {
+    deleteFiles: sinon.spy(),
+    setFiles: sinon.spy((_, files) => {
+      _files = files;
+    }),
+    getFiles: sinon.spy(() => _files),
+    hasKey: sinon.spy(),
+  };
+}
diff --git a/packages/form-js-viewer/test/spec/render/components/helper/mocks/index.js b/packages/form-js-viewer/test/spec/render/components/helper/mocks/index.js
index ed7daad26..bd94e4ad2 100644
--- a/packages/form-js-viewer/test/spec/render/components/helper/mocks/index.js
+++ b/packages/form-js-viewer/test/spec/render/components/helper/mocks/index.js
@@ -27,6 +27,10 @@ function _createMockModule(services, options) {
     viewerCommands: ['value', services.viewerCommands || new ViewerCommandsMock(options)],
     formLayouter: ['value', services.formLayouter || new FormLayouterMock(options)],
     formFieldRegistry: ['value', services.formFieldRegistry || new FormFieldRegistryMock(options)],
+    formFieldInstanceRegistry: [
+      'value',
+      services.formFieldInstanceRegistry || new FormFieldInstanceRegistryMock(options),
+    ],
     pathRegistry: ['value', services.pathRegistry || new PathRegistryMock(options)],
     eventBus: ['value', services.eventBus || new EventBusMock(options)],
     debounce: ['value', services.debounce || ((fn) => fn)],
@@ -42,6 +46,7 @@ function _createMockModule(services, options) {
       ? ['value', services.repeatRenderManager]
       : ['type', RepeatRenderManager],
     markdownRenderer: services.markdownRenderer ? ['value', services.markdownRenderer] : ['type', MarkdownRenderer],
+    fileRegistry: ['value', services.fileRegistry],
   };
 }
 
@@ -103,6 +108,26 @@ export class FormFieldRegistryMock {
   }
 }
 
+export class FormFieldInstanceRegistryMock {
+  constructor() {
+    this._instances = {};
+  }
+
+  syncInstance(instanceId, instance) {
+    this._instances[instanceId] = instance;
+
+    return instanceId;
+  }
+
+  get(instanceId) {
+    return this._instances[instanceId];
+  }
+
+  cleanupInstance(instanceId) {
+    delete this._instances[instanceId];
+  }
+}
+
 export class PathRegistryMock {
   getValuePath(field) {
     return field.valuePath || [field.path] || [field.key];