diff --git a/packages/form-js-viewer/src/render/FileRegistry.js b/packages/form-js-viewer/src/render/FileRegistry.js index 25464066a..bbc70e569 100644 --- a/packages/form-js-viewer/src/render/FileRegistry.js +++ b/packages/form-js-viewer/src/render/FileRegistry.js @@ -59,6 +59,14 @@ class FileRegistry { return Array.from(this[fileRegistry].keys()); } + /** + * @param {string} id + * @returns {boolean} + */ + hasKey(id) { + return this[fileRegistry].has(id); + } + /** * @param {string} id */ 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 8f53b4cc7..08951d1cf 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 @@ -33,7 +33,7 @@ export function FilePicker(props) { const fileInputRef = useRef(null); /** @type {import('../../FileRegistry').FileRegistry} */ const fileRegistry = useService('fileRegistry', false); - const { field, onChange, domId, errors = [], disabled, readonly, required, value: filesKey } = props; + const { field, onChange, domId, errors = [], disabled, readonly, required, value: filesKey = '' } = props; const { label, multiple = false, accept = '' } = field; /** @type {string} */ const evaluatedAccept = useSingleLineTemplateEvaluation(accept); @@ -42,6 +42,12 @@ export function FilePicker(props) { /** @type {File[]} */ const selectedFiles = fileRegistry === null ? EMPTY_ARRAY : fileRegistry.getFiles(filesKey); + useEffect(() => { + if (filesKey.length > 0 && 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)); 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 9597a7b6d..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 @@ -270,5 +270,6 @@ function getMockFileRegistry() { _files = files; }), getFiles: sinon.spy(() => _files), + hasKey: sinon.spy(), }; }