Merge pull request #2960 from appwrite/feat-upload-progress

feat: add upload progress feedback

Author: premtsd-code

bun.lock

@@ -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",

package.json

@@ -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>

src/lib/components/filePicker.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()} />