Merge pull request #1001 from MuckRock/allanlasser/issue983

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

@@ -39,6 +39,8 @@ progress through the three-part upload process.
     Project,
   } from "$lib/api/types";
 
+  import { beforeNavigate } from "$app/navigation";
+
   import { filesize } from "filesize";
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";
@@ -139,6 +141,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);