Can download ISO file by URL

virtweb_frontend/src/api/IsoFilesApi.ts

@@ -18,4 +18,15 @@ export class IsoFilesApi {
       progress: progress,
     });
   }
+
+  /**
+   * Upload iso from URL
+   */
+  static async UploadFromURL(url: string, filename: string): Promise<void> {
+    await APIClient.exec({
+      method: "POST",
+      uri: "/iso/upload_from_url",
+      jsonData: { url: url, filename: filename },
+    });
+  }
 }

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -1,4 +1,4 @@
-import { Button, LinearProgress, Typography } from "@mui/material";
+import { Button, LinearProgress, TextField, Typography } from "@mui/material";
 import { filesize } from "filesize";
 import { MuiFileInput } from "mui-file-input";
 import React from "react";
@@ -8,16 +8,20 @@ import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
+import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
 
 export function IsoFilesRoute(): React.ReactElement {
   return (
     <VirtWebRouteContainer label="ISO files management">
-      <UploadIsoFileForm onFileUploaded={() => alert("file uploaded!")} />
+      <UploadIsoFileCard onFileUploaded={() => alert("file uploaded!")} />
+      <UploadIsoFileFromUrlCard
+        onFileUploaded={() => alert("file uploaded!")}
+      />
     </VirtWebRouteContainer>
   );
 }
 
-function UploadIsoFileForm(p: {
+function UploadIsoFileCard(p: {
   onFileUploaded: () => void;
 }): React.ReactElement {
   const alert = useAlert();
@@ -53,6 +57,8 @@ function UploadIsoFileForm(p: {
 
       setValue(null);
       snackbar("The file was successfully uploaded!");
+
+      p.onFileUploaded();
     } catch (e) {
       console.error(e);
       await alert("Failed to perform file upload! " + e);
@@ -75,7 +81,6 @@ function UploadIsoFileForm(p: {
   return (
     <VirtWebPaper label="File upload">
       <div style={{ display: "flex", alignItems: "center" }}>
-        <span style={{ width: "10px" }}></span>
         <MuiFileInput
           value={value}
           onChange={handleChange}
@@ -88,3 +93,55 @@ function UploadIsoFileForm(p: {
     </VirtWebPaper>
   );
 }
+
+function UploadIsoFileFromUrlCard(p: {
+  onFileUploaded: () => void;
+}): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+  const loadingMessage = useLoadingMessage();
+
+  const [url, setURL] = React.useState("");
+  const [filename, setFilename] = React.useState<null | string>(null);
+
+  const autoFileName = url.split("/").slice(-1)[0];
+  const actualFileName = filename ?? autoFileName;
+
+  const upload = async () => {
+    try {
+      loadingMessage.show("Downloading file from URL...");
+      await IsoFilesApi.UploadFromURL(url, actualFileName);
+
+      setURL("");
+      setFilename(null);
+      snackbar("Successfully downloaded file!");
+    } catch (e) {
+      console.error(e);
+      alert("Failed to download file!");
+    }
+    loadingMessage.hide();
+  };
+
+  return (
+    <VirtWebPaper label="File upload from URL">
+      <div style={{ display: "flex", alignItems: "center" }}>
+        <TextField
+          label="URL"
+          value={url}
+          style={{ flex: 3 }}
+          onChange={(e) => setURL(e.target.value)}
+        />
+        <span style={{ width: "10px" }}></span>
+        <TextField
+          label="Filename"
+          value={actualFileName}
+          style={{ flex: 2 }}
+          onChange={(e) => setFilename(e.target.value)}
+        />
+        {url !== "" && actualFileName !== "" && (
+          <Button onClick={upload}>Upload file</Button>
+        )}
+      </div>
+    </VirtWebPaper>
+  );
+}

virtweb_frontend/src/widgets/VirtWebPaper.tsx

@@ -5,7 +5,7 @@ export function VirtWebPaper(
   p: { label: string } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <Paper elevation={2} style={{ padding: "10px" }}>
+    <Paper elevation={2} style={{ padding: "10px", margin: "20px" }}>
       <Typography
         variant="subtitle1"
         style={{ marginBottom: "10px", fontWeight: "bold" }}