From 734c81860ed0b9c6c0e7aceb4db510191a9356d1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 27 Jan 2025 14:44:21 +0530
Subject: [PATCH] update: confirm leaving page if file upload in progress.

---
 .../storage/bucket-[bucket]/+page.svelte      | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
index e9a7fc50b3..c25acc929d 100644
--- a/src/routes/(console)/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/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>