Allow to reset FileInputField internal state by calling resetState function on its ref (#630)

Author: bedrich-schindler

src/components/FileInputField/FileInputField.jsx

@@ -37,20 +37,30 @@ export const FileInputField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const internalInputRef = useRef();
-
-  // We need to have a reference to the input element to be able to call its methods,
-  // but at the same time we want to expose this reference to the parent component for
-  // case someone wants to call input methods from outside the component.
-  useImperativeHandle(ref, () => internalInputRef.current);
-
   const formLayoutContext = useContext(FormLayoutContext);
   const inputGroupContext = useContext(InputGroupContext);
   const translations = useContext(TranslationsContext);
 
   const [selectedFileNames, setSelectedFileNames] = useState([]);
   const [isDragging, setIsDragging] = useState(false);
 
+  const internalInputRef = useRef();
+
+  // We need to have a reference to the input element to be able to call its methods,
+  // but at the same time we want to expose this reference to the parent component for
+  // case someone wants to call input methods from outside the component.
+  useImperativeHandle(
+    ref,
+    () => {
+      const inputEl = internalInputRef?.current ?? {};
+      inputEl.resetState = () => {
+        setSelectedFileNames([]);
+      };
+      return inputEl;
+    },
+    [setSelectedFileNames],
+  );
+
   const handleFileChange = (files, event) => {
     if (files.length === 0) {
       setSelectedFileNames([]);

src/components/FileInputField/README.md

@@ -236,6 +236,37 @@ set the `multiple` prop to `true`.
 />
 ```
 
+## Resetting Input State
+
+If you need to reset the input state, you can do it by calling the
+`resetState` method on the component's ref.
+
+```docoff-react-preview
+const fileInputRef = React.useRef();
+
+return (
+  <>
+    <FileInputField
+      label="Attachment"
+      onFilesChanged={() => {}}
+      ref={fileInputRef}
+    />
+    <Button
+      label="Reset file input state"
+      onClick={() => {
+        if (!fileInputRef.current) {
+          return;
+        }
+        fileInputRef.current.resetState();
+      }}
+    />
+  </>
+);
+```
+
+You can also reset the input state by clicking the button with the `reset` type
+inside the form.
+
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you