File uploads now support up to 1GB files, and display progress

src/svelte-components/src/dialogs/DialogHost.svelte

@@ -3,6 +3,7 @@
   import HomeMachineDialog from "$dialogs/HomeMachineDialog.svelte";
   import ProbeDialog from "$dialogs/ProbeDialog.svelte";
   import ScreenRotationDialog from "$dialogs/ScreenRotationDialog.svelte";
+  import UploadDialog from "$dialogs/UploadDialog.svelte";
 
   const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
   type HomeMachineDialogPropsType = {
@@ -16,11 +17,17 @@
     probeType: "xyz" | "z";
   };
 
-  const ScreenRotationDialogProps = writable<ProbeDialogPropsType>();
+  const ScreenRotationDialogProps = writable<ScreenRotationDialogPropsType>();
   type ScreenRotationDialogPropsType = {
     open: boolean;
   };
 
+  const UploadDialogProps = writable<UploadDialogPropsType>();
+  type UploadDialogPropsType = {
+    open: boolean;
+    file: File;
+  };
+
   export function showDialog(
     dialog: "HomeMachine",
     props: Omit<HomeMachineDialogPropsType, "open">
@@ -31,6 +38,16 @@
     props: Omit<ProbeDialogPropsType, "open">
   );
 
+  export function showDialog(
+    dialog: "ScreenRotation",
+    props: Omit<ScreenRotationDialogPropsType, "open">
+  );
+
+  export function showDialog(
+    dialog: "Upload",
+    props: Omit<UploadDialogPropsType, "open">
+  );
+
   export function showDialog(dialog: string, props: any) {
     switch (dialog) {
       case "HomeMachine":
@@ -45,6 +62,10 @@
         ScreenRotationDialogProps.set({ ...props, open: true });
         break;
 
+      case "Upload":
+        UploadDialogProps.set({ ...props, open: true });
+        break;
+
       default:
         throw new Error(`Unknown dialog '${dialog}`);
     }
@@ -54,3 +75,4 @@
 <HomeMachineDialog {...$HomeMachineDialogProps} />
 <ProbeDialog {...$ProbeDialogProps} />
 <ScreenRotationDialog {...$ScreenRotationDialogProps} />
+<UploadDialog {...$UploadDialogProps} />

src/svelte-components/src/dialogs/UploadDialog.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import Button, { Label } from "@smui/button";
+  import LinearProgress from "@smui/linear-progress";
+
+  export let open = false;
+  export let file: File;
+
+  let wasOpen = false;
+  let xhr;
+  let progress;
+
+  $: if (open != wasOpen) {
+    if (!wasOpen) {
+      beginUpload();
+    }
+
+    wasOpen = open;
+  }
+
+  $: if (!open) {
+    xhr = undefined;
+  }
+
+  async function beginUpload() {
+    progress = 0;
+
+    xhr = new XMLHttpRequest();
+    xhr.upload.onload = () => {
+      open = false;
+    };
+
+    xhr.upload.onerror = () => {
+      open = false;
+      alert("Upload failed.");
+    };
+
+    xhr.upload.onabort = () => {
+      open = false;
+    };
+
+    xhr.upload.onprogress = (event) => {
+      progress = event.loaded / event.total;
+    };
+
+    xhr.open("PUT", `/api/file/${encodeURIComponent(file.name)}`);
+    xhr.send(file);
+  }
+
+  function onCancel() {
+    xhr.abort();
+  }
+</script>
+
+<Dialog
+  bind:open
+  scrimClickAction=""
+  aria-labelledby="upload-dialog-title"
+  aria-describedby="upload-dialog-content"
+>
+  <Title id="upload-dialog-title">
+    Uploading {#if file}{file.name}...{/if}
+  </Title>
+
+  <Content id="upload-dialog-content">
+    <LinearProgress {progress} />
+  </Content>
+
+  <Actions>
+    <Button on:click={onCancel}>
+      <Label>Cancel</Label>
+    </Button>
+  </Actions>
+</Dialog>