Can download disk images

virtweb_frontend/src/api/DiskImageApi.ts

@@ -43,6 +43,24 @@ export class DiskImageApi {
     ).data;
   }
 
+  /**
+   * Download disk image file
+   */
+  static async Download(
+    file: DiskImage,
+    progress: (p: number) => void
+  ): Promise<Blob> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/disk_images/${file.file_name}`,
+        downProgress(e) {
+          progress(Math.floor(100 * (e.progress / e.total)));
+        },
+      })
+    ).data;
+  }
+
   /**
    * Delete disk image file
    */

virtweb_frontend/src/routes/DiskImagesRoute.tsx

@@ -2,7 +2,9 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import {
+  Alert,
   Button,
+  CircularProgress,
   IconButton,
   LinearProgress,
   Tooltip,
@@ -22,6 +24,7 @@ import { DateWidget } from "../widgets/DateWidget";
 import { FileInput } from "../widgets/forms/FileInput";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { downloadBlob } from "../utils/FilesUtils";
 
 export function DiskImagesRoute(): React.ReactElement {
   const [list, setList] = React.useState<DiskImage[] | undefined>();
@@ -159,6 +162,24 @@ function DiskImageList(p: {
   const confirm = useConfirm();
   const loadingMessage = useLoadingMessage();
 
+  const [dlProgress, setDlProgress] = React.useState<undefined | number>();
+
+  // Download disk image file
+  const downloadDiskImage = async (entry: DiskImage) => {
+    setDlProgress(0);
+
+    try {
+      const blob = await DiskImageApi.Download(entry, setDlProgress);
+
+      downloadBlob(blob, entry.file_name);
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to download disk image file! ${e}`);
+    }
+
+    setDlProgress(undefined);
+  };
+
   // Delete disk image
   const deleteDiskImage = async (entry: DiskImage) => {
     if (
@@ -220,7 +241,7 @@ function DiskImageList(p: {
         return (
           <>
             <Tooltip title="Download image">
-              <IconButton onClick={() => downloadIso(params.row)}>
+              <IconButton onClick={() => downloadDiskImage(params.row)}>
                 <DownloadIcon />
               </IconButton>
             </Tooltip>
@@ -236,6 +257,31 @@ function DiskImageList(p: {
   ];
 
   return (
-    <DataGrid getRowId={(c) => c.file_name} rows={p.list} columns={columns} />
+    <>
+      {/* Download notification */}
+      {dlProgress !== undefined && (
+        <Alert severity="info">
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              overflow: "hidden",
+            }}
+          >
+            <Typography variant="body1">
+              Downloading... {dlProgress}%
+            </Typography>
+            <CircularProgress
+              variant="determinate"
+              size={"1.5rem"}
+              style={{ marginLeft: "10px" }}
+              value={dlProgress}
+            />
+          </div>
+        </Alert>
+      )}
+      <DataGrid getRowId={(c) => c.file_name} rows={p.list} columns={columns} />
+    </>
   );
 }