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,38 @@ 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();
+
+  const handleReset = useCallback((event) => {
+    setSelectedFileNames([]);
+    onFilesChanged([], event);
+  }, [onFilesChanged]);
+
+  // 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 in
+  // case someone wants to call input methods from outside the component.
+  useImperativeHandle(
+    ref,
+    () => {
+      // The reason of extending object instead of using spread operator is that
+      // if it is transformed to the object, it changes the reference of the object
+      // and its prototype chain.
+      const inputEl = internalInputRef?.current ?? {};
+      inputEl.resetState = () => {
+        handleReset(null);
+      };
+      return inputEl;
+    },
+    [handleReset],
+  );
+
   const handleFileChange = (files, event) => {
     if (files.length === 0) {
       setSelectedFileNames([]);
@@ -101,11 +119,6 @@ export const FileInputField = React.forwardRef((props, ref) => {
     }
   };
 
-  const handleReset = useCallback((event) => {
-    setSelectedFileNames([]);
-    onFilesChanged([], event);
-  }, [onFilesChanged]);
-
   useEffect(() => {
     const inputEl = internalInputRef.current;
     if (!inputEl) {

src/components/FileInputField/README.md

@@ -236,6 +236,44 @@ 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
+React.createElement(() => {
+  const fileInputRef = React.useRef();
+
+  return (
+    <Toolbar align="bottom">
+      <ToolbarItem>
+        <FileInputField
+          id="my-file"
+          label="Attachment"
+          onFilesChanged={() => {}}
+          ref={fileInputRef}
+        />
+      </ToolbarItem>
+      <ToolbarItem>
+        <Button
+          label="Reset file input state"
+          onClick={() => {
+            if (!fileInputRef.current) {
+              return;
+            }
+            fileInputRef.current.resetState();
+          }}
+        />
+      </ToolbarItem>
+    </Toolbar>
+  );
+});
+```
+
+You can also reset the input state by clicking the button with the `reset` type
+inside a form.
+
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you