diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 1cd8b4a64..402bc8af7 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -48,12 +48,12 @@ export default function InputFileComponent({
   const handleButtonClick = (): void => {
     // Create a file input element
     const input = document.createElement("input");
+    document.body.appendChild(input);
     input.type = "file";
     input.accept = fileTypes?.join(",");
     input.style.display = "none"; // Hidden from view
     input.multiple = false; // Allow only one file selection
-
-    input.onchange = (event: Event): void => {
+    const onChangeFile = (event: Event): void => {
       setLoading(true);
 
       // Get the selected file
@@ -90,6 +90,8 @@ export default function InputFileComponent({
       }
     };
 
+    input.addEventListener("change", onChangeFile);
+
     // Trigger the file selection dialog
     input.click();
   };