Add upload save feature

Add /api/upload-save endpoint that streams the data via the slave
assigned to the target instance to the instance saves directory, along
with a ctl command and web interface button to do the upload.

packages/web_ui/src/components/InstanceViewPage.jsx

@@ -12,10 +12,8 @@ import InstanceConsole from "./InstanceConsole";
 import InstanceRcon from "./InstanceRcon";
 import AssignInstanceModal from "./AssignInstanceModal";
 import StartStopInstanceButton from "./StartStopInstanceButton";
-import CreateSaveModal from "./CreateSaveModal";
 import LoadScenarioModal from "./LoadScenarioModal";
 import SavesList from "./SavesList";
-import SectionHeader from "./SectionHeader";
 import { notifyErrorHandler } from "../util/notify";
 import { useInstance } from "../model/instance";
 import { useSlave } from "../model/slave";
@@ -116,7 +114,6 @@ export default function InstanceViewPage(props) {
 			<Descriptions.Item label="Status">{instance["status"]}</Descriptions.Item>
 		</Descriptions>
 
-		<SectionHeader title="Saves" extra=<CreateSaveModal instance={instance} /> />
 		<SavesList instance={instance} />
 		<Title level={5} style={{ marginTop: 16 }}>Console</Title>
 		<InstanceConsole id={instanceId} />

packages/web_ui/src/components/SavesList.jsx

@@ -1,11 +1,13 @@
 import React, { useContext, useState } from "react";
-import { Button, Space, Table, Tooltip } from "antd";
+import { Button, Space, Table, Tooltip, Upload } from "antd";
 import CaretLeftOutlined from "@ant-design/icons/CaretLeftOutlined";
 import LeftOutlined from "@ant-design/icons/LeftOutlined";
 
 import libLink from "@clusterio/lib/link";
 
 import ControlContext from "./ControlContext";
+import CreateSaveModal from "./CreateSaveModal";
+import SectionHeader from "./SectionHeader";
 import { useSaves } from "../model/saves";
 import { notifyErrorHandler } from "../util/notify";
 
@@ -26,7 +28,7 @@ export default function SavesList(props) {
 	let saves = useSaves(props.instance.id);
 	let [starting, setStarting] = useState(false);
 
-	return <Table
+	const saveTable = <Table
 		size="small"
 		columns={[
 			{
@@ -78,4 +80,30 @@ export default function SavesList(props) {
 			</Space>,
 		}}
 	/>;
+
+	let uploadProps = {
+		name: "file",
+		accept: ".zip",
+		headers: {
+			"X-Access-Token": control.connector.token,
+		},
+		data: {
+			instance_id: props.instance.id,
+		},
+		showUploadList: false,
+		action: `${webRoot}api/upload-save`,
+		// TODO: show progress to user.
+	};
+
+	return <div>
+		<SectionHeader title="Saves" extra=<Space>
+			<Upload {...uploadProps} >
+				<Button>Upload save</Button>
+			</Upload>
+			<CreateSaveModal instance={props.instance} />
+		</Space> />
+		<Upload.Dragger className="save-list-dragger" openFileDialogOnClick={false} {...uploadProps}>
+			{saveTable}
+		</Upload.Dragger>
+	</div>;
 }

packages/web_ui/src/index.css

@@ -164,6 +164,10 @@ body {
 	white-space: pre-wrap;
 }
 
+.save-list-dragger .ant-upload.ant-upload-btn {
+	padding: 0;
+}
+
 .rcon-result code {
 	display: block;
 	background: #000;