Confirm leaving page if file upload in progress

src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte

@@ -50,6 +50,7 @@
     import Create from './create-file/create.svelte';
     import DeleteFile from './deleteFile.svelte';
     import { isCloud } from '$lib/system';
+    import { onMount } from 'svelte';
 
     export let data;
 
@@ -90,8 +91,31 @@
     $: maxFileSize = isCloud
         ? humanFileSize(sizeToBytes(getServiceLimit('fileSize'), 'MB', 1000))
         : null;
+
+    let isUploading = false;
+
+    const beforeunload = (event: BeforeUnloadEvent) => {
+        // legacy browser **may** support showing a custom message.
+        const message = 'An upload is in progress. Are you sure you want to leave?';
+
+        if (isUploading) {
+            event.preventDefault();
+            event.returnValue = message;
+            return message;
+        }
+    };
+
+    onMount(() => {
+        return uploader.subscribe(() => {
+            isUploading = $uploader.files.some(
+                (file) => !file.completed && file.progress < 100 && !file.failed
+            );
+        });
+    });
 </script>
 
+<svelte:window on:beforeunload={beforeunload} />
+
 <Container>
     <ContainerHeader title="Files" serviceId="storage" isFlex={false} total={usedStorage}>
         <svelte:fragment let:isButtonDisabled>