Can attach multiple ISOs to the same domain at the same time

virtweb_frontend/src/widgets/forms/VMSelectIsoInput.tsx

@@ -16,59 +16,68 @@ import Icon from "@mdi/react";
 export function VMSelectIsoInput(p: {
   editable: boolean;
   isoList: IsoFile[];
-  value?: string;
-  onChange: (newVal?: string) => void;
+  attachedISOs: string[];
+  onChange: (newVal: string[]) => void;
 }): React.ReactElement {
-  if (!p.value && !p.editable) return <></>;
-
-  if (p.value) {
-    const iso = p.isoList.find((d) => d.filename === p.value);
-    return (
-      <ListItem
-        secondaryAction={
-          p.editable && (
-            <IconButton
-              edge="end"
-              aria-label="detach iso file"
-              onClick={() => {
-                p.onChange(undefined);
-              }}
-            >
-              <Tooltip title="Detach ISO file">
-                <DeleteIcon />
-              </Tooltip>
-            </IconButton>
-          )
-        }
-      >
-        <ListItemAvatar>
-          <Avatar>
-            <Icon path={mdiDisc} />
-          </Avatar>
-        </ListItemAvatar>
-        <ListItemText
-          primary={iso?.filename}
-          secondary={filesize(iso?.size ?? 0)}
-        />
-      </ListItem>
-    );
-  }
+  if (!p.attachedISOs && !p.editable) return <></>;
 
   return (
-    <SelectInput
-      label="ISO file"
-      editable={p.editable}
-      value={p.value}
-      onValueChange={p.onChange}
-      options={[
-        { label: "None", value: undefined },
-        ...p.isoList.map((i) => {
-          return {
-            label: `${i.filename} ${filesize(i.size)}`,
-            value: i.filename,
-          };
-        }),
-      ]}
-    />
+    <>
+      <SelectInput
+        label="Attach an ISO file"
+        editable={p.editable}
+        value={undefined}
+        onValueChange={(v) => {
+          if (v) {
+            p.attachedISOs.push(v);
+            p.onChange(p.attachedISOs);
+          }
+        }}
+        options={[
+          { label: "None", value: undefined },
+          ...p.isoList.map((i) => {
+            return {
+              label: `${i.filename} ${filesize(i.size)}`,
+              value: i.filename,
+            };
+          }),
+        ]}
+      />
+
+      {p.attachedISOs.map((isoName, num) => {
+        const iso = p.isoList.find((d) => d.filename === isoName);
+        return (
+          <ListItem
+            key={num}
+            secondaryAction={
+              p.editable && (
+                <IconButton
+                  edge="end"
+                  aria-label="Detach iso file"
+                  onClick={() => {
+                    p.attachedISOs.splice(num, 1);
+                    p.onChange(p.attachedISOs);
+                  }}
+                >
+                  <Tooltip title="Detach ISO file">
+                    <DeleteIcon />
+                  </Tooltip>
+                </IconButton>
+              )
+            }
+          >
+            <ListItemAvatar>
+              <Avatar>
+                <Icon path={mdiDisc} />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={iso?.filename}
+              secondary={filesize(iso?.size ?? 0)}
+            />
+          </ListItem>
+        );
+      })}
+    </>
   );
 }

virtweb_frontend/src/widgets/vms/VMDetails.tsx

@@ -203,9 +203,9 @@ function VMDetailsInner(
         <VMSelectIsoInput
           editable={p.editable}
           isoList={p.isoList}
-          value={p.vm.iso_file}
+          attachedISOs={p.vm.iso_files}
           onChange={(v) => {
-            p.vm.iso_file = v;
+            p.vm.iso_files = v;
             p.onChange?.();
           }}
         />