From 68dea73fd9293ba8e1d8de5f7f96667ce28190ca Mon Sep 17 00:00:00 2001
From: Vinicius Goulart <vinicius.goulart@camunda.com>
Date: Fri, 23 Aug 2024 16:17:32 +0200
Subject: [PATCH] feat: reset filepicker on import.done and reset

---
 .../components/form-fields/FilePicker.js      | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

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 9b6dad040..cb644d3cd 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,8 +1,8 @@
 import { formFieldClasses } from '../Util';
 import { Label } from '../Label';
 import { Errors } from '../Errors';
-import { useRef, useState } from 'preact/hooks';
-import { useSingleLineTemplateEvaluation } from '../../hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useService, useSingleLineTemplateEvaluation } from '../../hooks';
 
 const type = 'filepicker';
 
@@ -28,6 +28,7 @@ export function FilePicker(props) {
   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;
   const evaluatedAccept = useSingleLineTemplateEvaluation(accept);
@@ -35,6 +36,23 @@ export function FilePicker(props) {
     useSingleLineTemplateEvaluation(typeof multiple === 'string' ? multiple : multiple.toString()) === 'true';
   const errorMessageId = `${domId}-error-message`;
 
+  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]);
+
   return (
     <div class={formFieldClasses(type, { errors, disabled, readonly })}>
       <Label htmlFor={domId} label={label} required={required} />