Merge pull request #1312 from ItzNotABug/fix-upload-context-switches

Fix: Upload Context Switches

src/lib/stores/uploader.ts

@@ -1,6 +1,7 @@
-import type { Models } from '@appwrite.io/console';
+import { Client, type Models, Storage } from '@appwrite.io/console';
 import { writable } from 'svelte/store';
-import { sdk } from './sdk';
+import { getProjectId } from '$lib/helpers/project';
+import { VARS } from '$lib/system';
 
 type UploaderFile = {
     $id: string;
@@ -17,6 +18,17 @@ export type Uploader = {
     files: UploaderFile[];
 };
 
+const temporaryStorage = () => {
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
+
+    const clientProject = new Client()
+        .setEndpoint(endpoint)
+        .setMode('admin')
+        .setProject(getProjectId());
+
+    return new Storage(clientProject);
+};
+
 const createUploader = () => {
     const { subscribe, set, update } = writable<Uploader>({
         isOpen: false,
@@ -71,7 +83,7 @@ const createUploader = () => {
                 n.files.unshift(newFile);
                 return n;
             });
-            const uploadedFile = await sdk.forProject.storage.createFile(
+            const uploadedFile = await temporaryStorage().createFile(
                 bucketId,
                 id ?? 'unique()',
                 file,

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,6 +91,30 @@
     $: maxFileSize = isCloud
         ? humanFileSize(sizeToBytes(getServiceLimit('fileSize'), 'MB', 1000))
         : null;
+
+    let isUploading = false;
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+        if (isUploading) {
+            event.preventDefault();
+            event.returnValue = 'An upload is in progress. Are you sure you want to leave?';
+        }
+    };
+
+    onMount(() => {
+        const unsubscribe = uploader.subscribe(() => {
+            isUploading = $uploader.files.some(
+                (file) => (!file.completed || file.progress < 100) && !file.failed
+            );
+        });
+
+        window.addEventListener('beforeunload', handleBeforeUnload);
+
+        return () => {
+            unsubscribe();
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    });
 </script>
 
 <Container>