Remove mui-file-input dependency

.drone.yml

@@ -11,7 +11,7 @@ steps:
       path: /tmp/web_build
   commands:
   - cd virtweb_frontend
-  - npm install --legacy-peer-deps # TODO : remove when mui-file-input is updated
+  - npm install
   - npm run lint
   - npm run build
   - mv dist /tmp/web_build

virtweb_frontend/package.json

@@ -15,39 +15,38 @@
     "@fontsource/roboto": "^5.2.5",
     "@mdi/js": "^7.2.96",
     "@mdi/react": "^1.6.1",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
-    "@mui/x-charts": "^7.28.0",
-    "@mui/x-data-grid": "^7.28.1",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
+    "@mui/x-charts": "^8.3.1",
+    "@mui/x-data-grid": "^8.3.1",
     "date-and-time": "^3.6.0",
     "filesize": "^10.1.6",
-    "humanize-duration": "^3.29.0",
-    "mui-file-input": "^7.0.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.4.0",
+    "humanize-duration": "^3.32.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0",
     "react-syntax-highlighter": "^15.6.1",
-    "react-vnc": "^3.0.7",
+    "react-vnc": "^3.1.0",
     "uuid": "^11.1.0",
-    "xml-formatter": "^3.6.0"
+    "xml-formatter": "^3.6.6"
   },
   "devDependencies": {
-    "@eslint/js": "^9.21.0",
+    "@eslint/js": "^9.27.0",
     "@types/humanize-duration": "^3.27.1",
     "@types/jest": "^29.5.14",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-dom": "^1.38.3",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.27.0",
+    "eslint-plugin-react-dom": "^1.49.0",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-react-x": "^1.38.3",
-    "globals": "^15.15.0",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.3"
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react-x": "^1.49.0",
+    "globals": "^16.1.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5"
   }
 }

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -1,4 +1,5 @@
 import DeleteIcon from "@mui/icons-material/Delete";
+import DownloadIcon from "@mui/icons-material/Download";
 import {
   Alert,
   Button,
@@ -9,21 +10,20 @@ import {
   Tooltip,
   Typography,
 } from "@mui/material";
-import DownloadIcon from "@mui/icons-material/Download";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
 import { filesize } from "filesize";
-import { MuiFileInput } from "mui-file-input";
 import React from "react";
 import { IsoFile, IsoFilesApi } from "../api/IsoFilesApi";
 import { ServerApi } from "../api/ServerApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { downloadBlob } from "../utils/FilesUtils";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { FileInput } from "../widgets/forms/FileInput";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
-import { downloadBlob } from "../utils/FilesUtils";
 
 export function IsoFilesRoute(): React.ReactElement {
   const [list, setList] = React.useState<IsoFile[] | undefined>();
@@ -116,7 +116,7 @@ function UploadIsoFileCard(p: {
   return (
     <VirtWebPaper label="File upload">
       <div style={{ display: "flex", alignItems: "center" }}>
-        <MuiFileInput
+        <FileInput
           value={value}
           onChange={handleChange}
           style={{ flex: 1 }}

virtweb_frontend/src/widgets/forms/FileInput.tsx

@@ -0,0 +1,75 @@
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import ClearIcon from "@mui/icons-material/Clear";
+import {
+  IconButton,
+  InputAdornment,
+  OutlinedInputProps,
+  TextField,
+  TextFieldSlotsAndSlotProps,
+  Tooltip,
+} from "@mui/material";
+import { filesize } from "filesize";
+import React from "react";
+
+export function FileInput(
+  p: {
+    label?: string;
+    value: File | null;
+    onChange: (file: File | null) => void;
+    style?: React.CSSProperties;
+  } & TextFieldSlotsAndSlotProps<OutlinedInputProps>
+): React.ReactElement {
+  const fileInput = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <TextField
+      onClick={() => fileInput.current?.click()}
+      {...p}
+      value={""}
+      onChange={() => {}}
+      type="file"
+      slotProps={{
+        input: {
+          startAdornment: (
+            <>
+              <InputAdornment position="start">
+                <AttachFileIcon />
+                &nbsp;&nbsp;
+                {p.value ? p.value.name : "Insert a file"}
+              </InputAdornment>
+            </>
+          ),
+          endAdornment: p.value ? (
+            <InputAdornment position="end">
+              {filesize(p.value.size)}
+              <Tooltip
+                title="Remove attached file"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    p.onChange(null);
+                  }}
+                >
+                  <ClearIcon />
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          ) : undefined,
+
+          onChange: (e) => {
+            const files = (e.target as any).files;
+            p.onChange(files.length > 0 ? files[0] : null);
+          },
+        },
+        htmlInput: {
+          ref: fileInput,
+          style: { opacity: 0 },
+        },
+      }}
+      placeholder={"Insert a file"}
+      variant="outlined"
+    />
+  );
+}