diff --git a/bun.lock b/bun.lock
index a4f83a4c1f..bf887e967b 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,7 +10,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bfe7ce3",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8dcaa17",
         "@faker-js/faker": "^9.9.0",
         "@plausible-analytics/tracker": "^0.4.4",
         "@popperjs/core": "^2.11.8",
@@ -121,7 +121,7 @@
 
     "@appwrite.io/pink-legacy": ["@appwrite.io/pink-legacy@1.0.3", "", { "dependencies": { "@appwrite.io/pink-icons": "1.0.0", "the-new-css-reset": "^1.11.2" } }, "sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ=="],
 
-    "@appwrite.io/pink-svelte": ["@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bfe7ce3", { "dependencies": { "@appwrite.io/pink-icons-svelte": "2.0.0-RC.1", "@floating-ui/dom": "^1.6.13", "@melt-ui/pp": "^0.3.2", "@melt-ui/svelte": "^0.86.6", "@tanstack/svelte-virtual": "^3.13.10", "ansicolor": "^2.0.3", "d3": "^7.9.0", "fuse.js": "^7.1.0", "pretty-bytes": "^6.1.1", "shiki": "^1.18.0", "svelte-motion": "^0.12.2", "svelte-sonner": "^0.3.28" }, "peerDependencies": { "svelte": "^4.0.0" } }],
+    "@appwrite.io/pink-svelte": ["@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8dcaa17", { "dependencies": { "@appwrite.io/pink-icons-svelte": "2.0.0-RC.1", "@floating-ui/dom": "^1.6.13", "@melt-ui/pp": "^0.3.2", "@melt-ui/svelte": "^0.86.6", "@tanstack/svelte-virtual": "^3.13.10", "ansicolor": "^2.0.3", "d3": "^7.9.0", "fuse.js": "^7.1.0", "pretty-bytes": "^6.1.1", "shiki": "^1.18.0", "svelte-motion": "^0.12.2", "svelte-sonner": "^0.3.28" }, "peerDependencies": { "svelte": "^4.0.0" } }],
 
     "@asamuzakjp/css-color": ["@asamuzakjp/css-color@3.2.0", "", { "dependencies": { "@csstools/css-calc": "^2.1.3", "@csstools/css-color-parser": "^3.0.9", "@csstools/css-parser-algorithms": "^3.0.4", "@csstools/css-tokenizer": "^3.0.3", "lru-cache": "^10.4.3" } }, "sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw=="],
 
diff --git a/package.json b/package.json
index 91e5325526..f4954dd942 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bfe7ce3",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8dcaa17",
         "@faker-js/faker": "^9.9.0",
         "@plausible-analytics/tracker": "^0.4.4",
         "@popperjs/core": "^2.11.8",
diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte
index 2f5b8b05ee..e5171cfe81 100644
--- a/src/lib/components/filePicker.svelte
+++ b/src/lib/components/filePicker.svelte
@@ -54,6 +54,7 @@
     let searchEnabled = false;
     let fileSelector: HTMLInputElement;
     let uploading = false;
+    let uploadProgress = 0;
     let view: 'grid' | 'list' = 'list';
     $: planMaxSize =
         isCloud && $currentPlan?.['fileSize']
@@ -97,12 +98,17 @@
     async function uploadFile() {
         try {
             uploading = true;
+            uploadProgress = 0;
             let file = null;
+
             if (localFileBucketSelected) {
                 file = await sdk.forConsoleIn(page.params.region).storage.createFile({
                     bucketId: 'default',
                     fileId: ID.unique(),
-                    file: localFile[0]
+                    file: localFile[0],
+                    onProgress: (progress) => {
+                        uploadProgress = progress.progress;
+                    }
                 });
             } else {
                 file = await sdk
@@ -111,7 +117,10 @@
                         bucketId: selectedBucket,
                         fileId: ID.unique(),
                         file: fileSelector.files[0],
-                        permissions: [Permission.read(Role.any())]
+                        permissions: [Permission.read(Role.any())],
+                        onProgress: (progress) => {
+                            uploadProgress = progress.progress;
+                        }
                     });
                 search.set($search === null ? '' : null);
             }
@@ -123,6 +132,7 @@
             });
         } finally {
             uploading = false;
+            uploadProgress = 0;
         }
     }
 
@@ -246,7 +256,7 @@
 <svelte:document on:visibilitychange={handleVisibilityChange} />
 
 <Form {onSubmit} isModal class="file-picker-modal-form">
-    <Modal bind:open={show} title="Select file" size="l">
+    <Modal bind:open={show} title="Select file" size="l" dismissible={!uploading}>
         <Layout.Stack direction={$isSmallViewport ? 'column' : 'row'} height="50vh" gap="none">
             <!-- min-width to avoid a layout-shift -->
             <aside>
@@ -428,7 +438,10 @@
                                     bind:this={fileSelector} />
                                 {#if uploading}
                                     <div class="loader is-small"></div>
-                                    <span>Uploading</span>
+                                    <span
+                                        >Uploading{uploadProgress > 0
+                                            ? ` ${uploadProgress}%`
+                                            : ''}</span>
                                 {:else}
                                     <span class="icon-upload" aria-hidden="true"></span>
                                     <span>Upload</span>
@@ -711,12 +724,18 @@
         </Layout.Stack>
         <svelte:fragment slot="footer">
             <Layout.Stack direction="row" justifyContent="flex-end">
-                <Button text on:click={closeModal}>Cancel</Button>
+                <Button text disabled={uploading} on:click={closeModal}>Cancel</Button>
                 <Button
                     submit
-                    disabled={(selectedBucket === null && localFileBucketSelected === false) ||
-                        (selectedFile === null && localFile === null)}
-                    >Select
+                    disabled={uploading ||
+                        (selectedBucket === null && localFileBucketSelected === false) ||
+                        (selectedFile === null && localFile === null)}>
+                    {#if uploading}
+                        <div class="loader is-small"></div>
+                        <span>Uploading{uploadProgress > 0 ? ` ${uploadProgress}%` : ''}</span>
+                    {:else}
+                        Select
+                    {/if}
                 </Button>
             </Layout.Stack>
         </svelte:fragment>
diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index 721917ca10..4b7d3aedf9 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -9,7 +9,8 @@
             return {
                 name: file.name,
                 size: file.size,
-                status: file.status
+                status: file.status,
+                progress: file.progress
             };
         })}
         on:close={() => uploader.close()} />