Show confirmation when navigating away from in-progress upload form

src/langs/json/en.json

@@ -144,6 +144,7 @@
     "tesseract": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://tesseract-ocr.github.io/tessdoc/\">Tesseract</a> is an open source OCR engine available free to all DocumentCloud accounts.",
     "textract": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://aws.amazon.com/textract/\">Textract</a> is a more powerful OCR engine that can better handle messy text, handwriting and fuzzy scans.",
     "empty": "Get started by selecting, pasting or dragging-and-dropping files",
+    "confirmLeave": "Your upload is not complete. Are you sure you want to leave the page?",
     "steps": {
       "ready": "Ready",
       "created": "Created",

src/lib/components/forms/DocumentUpload.svelte

@@ -41,6 +41,7 @@ progress through the three-part upload process.
 
   import { filesize } from "filesize";
   import { onMount } from "svelte";
+  import { beforeNavigate } from "$app/navigation";
   import { _ } from "svelte-i18n";
   import { Paperclip16, Paperclip24, Upload16 } from "svelte-octicons";
 
@@ -139,6 +140,14 @@ progress through the three-part upload process.
     addFiles(getFilesToUpload());
   });
 
+  beforeNavigate((navigation) => {
+    if (!empty && !loading) {
+      if (!window.confirm($_("uploadDialog.confirmLeave"))) {
+        navigation.cancel();
+      }
+    }
+  });
+
   function uniqueId(): string {
     // random enough for a small set
     return Math.random().toString(32).slice(2);