Can upload ISO files

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -0,0 +1,90 @@
+import { Button, LinearProgress, Typography } from "@mui/material";
+import { filesize } from "filesize";
+import { MuiFileInput } from "mui-file-input";
+import React from "react";
+import { IsoFilesApi } from "../api/IsoFilesApi";
+import { ServerApi } from "../api/ServerApi";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+import { VirtWebPaper } from "../widgets/VirtWebPaper";
+import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+
+export function IsoFilesRoute(): React.ReactElement {
+  return (
+    <VirtWebRouteContainer label="ISO files management">
+      <UploadIsoFileForm onFileUploaded={() => alert("file uploaded!")} />
+    </VirtWebRouteContainer>
+  );
+}
+
+function UploadIsoFileForm(p: {
+  onFileUploaded: () => void;
+}): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const [value, setValue] = React.useState<File | null>(null);
+  const [uploadProgress, setUploadProgress] = React.useState<number | null>(
+    null
+  );
+
+  const handleChange = (newValue: File | null) => {
+    if (newValue && newValue.size > ServerApi.Config.iso_max_size) {
+      alert(
+        `The file is too big (max size allowed: ${filesize(
+          ServerApi.Config.iso_max_size
+        )}`
+      );
+      return;
+    }
+
+    if (newValue && !ServerApi.Config.iso_mimetypes.includes(newValue.type)) {
+      alert(`Selected file mimetype is not allowed! (${newValue.type})`);
+      return;
+    }
+
+    setValue(newValue);
+  };
+
+  const upload = async () => {
+    try {
+      setUploadProgress(0);
+      await IsoFilesApi.Upload(value!, setUploadProgress);
+
+      setValue(null);
+      snackbar("The file was successfully uploaded!");
+    } catch (e) {
+      console.error(e);
+      await alert("Failed to perform file upload! " + e);
+    }
+
+    setUploadProgress(null);
+  };
+
+  if (uploadProgress !== null) {
+    return (
+      <VirtWebPaper label="File upload">
+        <Typography variant="body1">
+          Upload in progress ({Math.floor(uploadProgress * 100)}%)...
+        </Typography>
+        <LinearProgress variant="determinate" value={uploadProgress * 100} />
+      </VirtWebPaper>
+    );
+  }
+
+  return (
+    <VirtWebPaper label="File upload">
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <span style={{ width: "10px" }}></span>
+        <MuiFileInput
+          value={value}
+          onChange={handleChange}
+          style={{ flex: 1 }}
+          inputProps={{ accept: ServerApi.Config.iso_mimetypes.join(",") }}
+        />
+
+        {value && <Button onClick={upload}>Upload file</Button>}
+      </div>
+    </VirtWebPaper>
+  );
+}