From 43e5d1b9712f3c180a0dcb30584f1376de339a5b Mon Sep 17 00:00:00 2001 From: Prem Palanisamy Date: Tue, 7 Apr 2026 13:47:05 +0100 Subject: [PATCH 1/3] feat: add upload progress feedback to storage uploads and file picker Pass progress to Upload.Box for real-time progress bars on storage file uploads. Add onProgress callbacks and percentage display to the file picker modal used by CSV/JSON import. --- src/lib/components/filePicker.svelte | 28 ++++++++++++++++++++++------ src/lib/components/uploadBox.svelte | 3 ++- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index 2f5b8b05ee..20ddd2e82c 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; } } @@ -428,7 +438,7 @@ bind:this={fileSelector} /> {#if uploading}
- Uploading + Uploading{uploadProgress > 0 ? ` ${uploadProgress}%` : ''} {:else} Upload @@ -714,9 +724,15 @@ 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()} /> From 501e7e3c25d564db3c82f4cc86896b9c0de19e6a Mon Sep 17 00:00:00 2001 From: Prem Palanisamy Date: Tue, 7 Apr 2026 14:11:52 +0100 Subject: [PATCH 2/3] fix: prettier formatting in filePicker --- src/lib/components/filePicker.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index 20ddd2e82c..1d5e9894cd 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -438,7 +438,10 @@ bind:this={fileSelector} /> {#if uploading}
- Uploading{uploadProgress > 0 ? ` ${uploadProgress}%` : ''} + Uploading{uploadProgress > 0 + ? ` ${uploadProgress}%` + : ''} {:else} Upload From 384ce80c1c8ba6eb60b3bbfce265daafb6cadcbf Mon Sep 17 00:00:00 2001 From: Prem Palanisamy Date: Wed, 8 Apr 2026 11:45:02 +0100 Subject: [PATCH 3/3] fix: prevent modal dismiss during upload and bump pink-svelte - Disable Cancel button and set dismissible=false on Modal during upload - Update @appwrite.io/pink-svelte to 8dcaa17 (progress bar a11y fixes) --- bun.lock | 4 ++-- package.json | 2 +- src/lib/components/filePicker.svelte | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) 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 1d5e9894cd..e5171cfe81 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -256,7 +256,7 @@
- +