fix: clear file references to deleted files

Related to #1239
bpmn-io · Sep 9, 2024 · 0bf66bf · 0bf66bf
1 parent 17a535f
commit 0bf66bf
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
@@ -270,5 +270,6 @@ function getMockFileRegistry() {
       _files = files;
     }),
     getFiles: sinon.spy(() => _files),
+    hasKey: sinon.spy(),
   };
 }