File upload should be reset

resolves #2103

frontend/taipy-gui/src/components/Taipy/FileSelector.tsx

@@ -26,13 +26,14 @@ import Button from "@mui/material/Button";
 import LinearProgress from "@mui/material/LinearProgress";
 import Tooltip from "@mui/material/Tooltip";
 import UploadFile from "@mui/icons-material/UploadFile";
+import { SxProps } from "@mui/material";
+import { nanoid } from "nanoid";
 
 import { TaipyContext } from "../../context/taipyContext";
 import { createAlertAction, createSendActionNameAction } from "../../context/taipyReducers";
 import { useClassNames, useDynamicProperty, useModule } from "../../utils/hooks";
 import { expandSx, getCssSize, noDisplayStyle, TaipyActiveProps } from "./utils";
 import { uploadFile } from "../../workers/fileupload";
-import { SxProps } from "@mui/material";
 
 interface FileSelectorProps extends TaipyActiveProps {
     onAction?: string;
@@ -76,7 +77,7 @@ const FileSelector = (props: FileSelectorProps) => {
     const [progress, setProgress] = useState(0);
     const { state, dispatch } = useContext(TaipyContext);
     const butRef = useRef<HTMLElement>(null);
-    const inputId = useMemo(() => (id || `tp-${Date.now()}-${Math.random()}`) + "-upload-file", [id]);
+    const inputId = useMemo(() => (id || `tp-${nanoid()}`) + "-upload-file", [id]);
     const module = useModule();
 
     const className = useClassNames(props.libClassName, props.dynamicClassName, props.className);
@@ -117,6 +118,8 @@ const FileSelector = (props: FileSelectorProps) => {
                             dispatch(
                                 createAlertAction({ atype: "success", message: value, system: false, duration: 3000 })
                             );
+                        const fileInput = document.getElementById(inputId) as HTMLInputElement;
+                        fileInput && (fileInput.value = "");
                     },
                     (reason) => {
                         setUpload(false);
@@ -124,11 +127,13 @@ const FileSelector = (props: FileSelectorProps) => {
                             dispatch(
                                 createAlertAction({ atype: "error", message: reason, system: false, duration: 3000 })
                             );
+                        const fileInput = document.getElementById(inputId) as HTMLInputElement;
+                        fileInput && (fileInput.value = "");
                     }
                 );
             }
         },
-        [state.id, id, onAction, props.onUploadAction, props.uploadData, notify, updateVarName, dispatch, module]
+        [state.id, id, onAction, props.onUploadAction, props.uploadData, notify, updateVarName, dispatch, module, inputId]
     );
 
     const handleChange = useCallback(