From 1d426a8587d694934399a080a011674e0ef3ddda Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 11:27:32 +0100
Subject: [PATCH 1/7] fix: uploader closes and shows uploadboc

---
 src/lib/components/uploadBox.svelte           | 25 +++++------
 src/lib/stores/uploader.ts                    | 41 ++++++++++++-------
 .../bucket-[bucket]/[[page]]/+page.svelte     |  4 ++
 .../storage/bucket-[bucket]/create.svelte     | 14 ++-----
 4 files changed, 44 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index 604a7b819..cfe5b5721 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -37,6 +37,8 @@
         <div class="upload-box-content" class:is-open={!$uploader.isCollapsed}>
             <ul class="upload-box-list">
                 {#each $uploader.files as file}
+                    {@const progress = Math.round(file.progress)}
+
                     {#if file.completed || file.progress === 100}
                         <li class="upload-box-item">
                             <div class="u-margin-inline-end-16">
@@ -46,7 +48,7 @@
                                     name={file.name} />
                             </div>
 
-                            <label for={file.name} class="file-name">{file.name}</label>
+                            <label for={file.name} class="file-name u-trim">{file.name}</label>
                             <span class="icon-check" />
                         </li>
                     {:else if file.failed}
@@ -55,12 +57,12 @@
                                 <div
                                     class="progress"
                                     role="progressbar"
-                                    aria-valuenow={file.progress}
+                                    aria-valuenow={progress}
                                     aria-valuemin={0}
                                     aria-valuemax={100} />
-                                <span class="icon">{file.progress}%</span>
+                                <span class="icon">{progress}%</span>
                             </div>
-                            <label for={file.name} class="file-name">{file.name}</label>
+                            <label for={file.name} class="file-name u-trim">{file.name}</label>
                             <Pill danger>Failed</Pill>
                             <button
                                 class="icon-button"
@@ -69,27 +71,20 @@
                                 <span class="icon-x" />
                             </button>
                         </li>
-                    {:else if file.cancelled}
-                        cancelled?
                     {:else}
                         <li class="upload-box-item">
                             <div class="upload-image u-margin-inline-end-16">
                                 <div
                                     class="progress"
                                     role="progressbar"
-                                    aria-valuenow={file.progress}
+                                    style={`--progress-value:${progress}`}
+                                    aria-valuenow={progress}
                                     aria-valuemin={0}
                                     aria-valuemax={100} />
-                                <span class="icon">{file.progress}%</span>
+                                <span class="icon">{progress}%</span>
                             </div>
-                            <label for={file.name} class="file-name">{file.name}</label>
+                            <label for={file.name} class="file-name u-trim">{file.name}</label>
                             <Pill warning>Pending</Pill>
-                            <button
-                                class="icon-button"
-                                aria-label="Pending"
-                                on:click={() => removeFile(file.$id, file.bucketId)}>
-                                <span class="icon-x" />
-                            </button>
                         </li>
                     {/if}
                 {/each}
diff --git a/src/lib/stores/uploader.ts b/src/lib/stores/uploader.ts
index 6ca846214..371bba624 100644
--- a/src/lib/stores/uploader.ts
+++ b/src/lib/stores/uploader.ts
@@ -1,5 +1,6 @@
 import type { Models } from '@aw-labs/appwrite-console';
 import { writable } from 'svelte/store';
+import { sdkForProject } from './sdk';
 
 type UploaderFile = {
     $id: string;
@@ -8,7 +9,6 @@ type UploaderFile = {
     progress: number;
     completed: boolean;
     failed: boolean;
-    cancelled: boolean;
     error?: string;
 };
 export type Uploader = {
@@ -57,22 +57,37 @@ const createUploader = () => {
                 isCollapsed: false,
                 files: []
             }),
-        addFile: async (file: Models.File, isOpen = true, isCollapsed = false) => {
+        uploadFile: async (bucketId: string, id: string, file: File, permissions: string[]) => {
             const newFile: UploaderFile = {
-                $id: file.$id,
-                bucketId: file.bucketId,
+                $id: id,
+                bucketId: bucketId,
                 name: file.name,
-                progress: calculateProgress(file),
-                completed: calculateProgress(file) === 100 ? true : false,
-                failed: false,
-                cancelled: false
+                progress: 0,
+                completed: false,
+                failed: false
             };
-            return update((n) => {
-                n.isOpen = isOpen;
-                n.isCollapsed = isCollapsed;
+            update((n) => {
+                n.isOpen = true;
+                n.isCollapsed = false;
                 n.files.unshift(newFile);
                 return n;
             });
+            const uploadedFile = await sdkForProject.storage.createFile(
+                bucketId,
+                id ?? 'unique()',
+                file,
+                permissions,
+                (p) => {
+                    newFile.$id = p.$id;
+                    newFile.progress = p.progress;
+                    newFile.completed = p.progress === 100 ? true : false;
+                    updateFile(p.$id, newFile);
+                }
+            );
+            newFile.$id = uploadedFile.$id;
+            newFile.progress = 100;
+            newFile.completed = true;
+            updateFile(newFile.$id, newFile);
         },
         removeFile: async (file: Models.File) => {
             if (file.chunksTotal === file.chunksUploaded) {
@@ -81,10 +96,6 @@ const createUploader = () => {
 
                     return n;
                 });
-            } else {
-                if (confirm('Are you sure you want to cancel the upload?')) {
-                    updateFile(file.$id, { cancelled: true });
-                }
             }
         }
     };
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
index 600677d32..0592ac359 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
@@ -162,11 +162,15 @@
                                     </button>
                                     <svelte:fragment slot="list">
                                         <DropListLink
+                                            on:click={() => {
+                                                showDropdown[index] = false;
+                                            }}
                                             href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
                                             icon="pencil">Update</DropListLink>
                                         <DropListItem
                                             icon="trash"
                                             on:click={() => {
+                                                showDropdown[index] = false;
                                                 selectedFile = file;
                                                 showDelete = true;
                                             }}>Delete</DropListItem>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
index 5570b62f1..5872087f1 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -2,7 +2,6 @@
     import { Button, FormList, InputFile } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { Modal, CustomId, Heading, Alert } from '$lib/components';
-    import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
@@ -25,20 +24,15 @@
 
     async function create() {
         try {
-            const file = await sdkForProject.storage.createFile(
-                bucketId,
-                id ?? 'unique()',
-                files[0],
-                permissions
-            );
-            files = null;
             showCreate = false;
+            await uploader.uploadFile(bucketId, id, files[0], permissions);
+            files = null;
             showCustomId = false;
-            uploader.addFile(file);
+            // uploader.addFile(file);
             dispatch('created');
             addNotification({
                 type: 'success',
-                message: `${file.name} has been created`
+                message: `File has been uploaded`
             });
             trackEvent('submit_file_create');
         } catch ({ message }) {

From 50242bb66c3c1de8dd7cfef078bf2a138ec6cae2 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 11:53:18 +0100
Subject: [PATCH 2/7] fix: input file layout

---
 src/lib/elements/forms/inputFile.svelte | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index f9f13908f..319a78911 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { Trim } from '$lib/components';
     import { Button } from '.';
 
     export let label: string = null;
@@ -47,20 +48,23 @@
         on:dragover|preventDefault={dragOverHandler}
         on:dragleave|preventDefault={() => (hovering = false)}>
         <div class="u-flex u-main-center u-cross-center u-gap-32">
-            <div class="avatar is-size-large">
+            <div class="avatar is-size-large u-min-width-0">
                 <span class="icon-folder" aria-hidden="true" />
             </div>
-            <div class="u-grid u-gap-16">
+            <div class="u-grid u-gap-16 u-min-width-0">
                 <p>Drag and drop files here to upload</p>
-                <div class="u-flex u-gap-8 ">
+                <div class="u-flex u-gap-8 u-min-width-0">
                     <Button secondary on:click={() => input.click()}>
                         <span class="icon-upload" aria-hidden="true" />
                         <span class="text">Choose File</span>
                     </Button>
 
                     {#if files?.length}
-                        <div class="u-flex ">
-                            {files.item(0).name}
+                        {@const fileName = files.item(0).name.split('.')}
+                        <div class="u-flex u-cross-center u-min-width-0">
+                            <Trim>{fileName[0]}</Trim>
+                            <span class="u-min-width-0 u-flex-shrink-0 u-margin-inline-end-16"
+                                >.{fileName[1]}</span>
                             <button
                                 on:click={() => (files = null)}
                                 type="button"

From fa60e14e89452ac841a907386ec07d81975c8808 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 11:54:23 +0100
Subject: [PATCH 3/7] chore: remove unused function

---
 src/lib/stores/uploader.ts | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/lib/stores/uploader.ts b/src/lib/stores/uploader.ts
index 371bba624..86b7b31aa 100644
--- a/src/lib/stores/uploader.ts
+++ b/src/lib/stores/uploader.ts
@@ -102,8 +102,3 @@ const createUploader = () => {
 };
 
 export const uploader = createUploader();
-
-function calculateProgress(file: Models.File) {
-    const progress = file.chunksUploaded / file.chunksTotal;
-    return Math.round(progress * 100);
-}

From b55e89fb6a3b131a0328abae0e9a3cc70949e846 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 11:56:03 +0100
Subject: [PATCH 4/7] fix: notification message for users

---
 .../project-[project]/auth/user-[user]/updateStatus.svelte  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte b/src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte
index 3f40a875d..54f6df3a7 100644
--- a/src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte
+++ b/src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte
@@ -19,7 +19,7 @@
             invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
-                    $user.emailVerification ? 'verified' : 'unverified'
+                    $user.emailVerification ? 'unverified' : 'verified'
                 }`,
                 type: 'success'
             });
@@ -38,7 +38,7 @@
             invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
-                    $user.phoneVerification ? 'verified' : 'unverified'
+                    $user.phoneVerification ? 'unverified' : 'verified'
                 }`,
                 type: 'success'
             });
@@ -56,7 +56,7 @@
             invalidate(Dependencies.USER);
             addNotification({
                 message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
-                    $user.status ? 'unblocked' : 'blocked'
+                    $user.status ? 'blocked' : 'unblocked'
                 }`,
                 type: 'success'
             });

From 80ec6dcad4519b52a73efddff3e8848099552e0d Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 13:10:47 +0100
Subject: [PATCH 5/7] feat: upload box are clickable

---
 src/lib/components/uploadBox.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index cfe5b5721..e3fd1c437 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -3,6 +3,8 @@
     import { Pill } from '$lib/elements';
     import { sdkForProject } from '$lib/stores/sdk';
     import { Avatar } from '$lib/components';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
 
     async function removeFile($id: string, bucketId: string) {
         const file = await sdkForProject.storage.getFile(bucketId, $id);
@@ -40,7 +42,9 @@
                     {@const progress = Math.round(file.progress)}
 
                     {#if file.completed || file.progress === 100}
-                        <li class="upload-box-item">
+                        <a
+                            class="upload-box-item"
+                            href={`${base}/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/file-${file.$id}`}>
                             <div class="u-margin-inline-end-16">
                                 <Avatar
                                     size={32}
@@ -50,7 +54,7 @@
 
                             <label for={file.name} class="file-name u-trim">{file.name}</label>
                             <span class="icon-check" />
-                        </li>
+                        </a>
                     {:else if file.failed}
                         <li class="upload-box-item">
                             <div class="upload-image u-margin-inline-end-16">

From ec20b12a7d8e1c978f8188510a55b01677d8e334 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 14:49:15 +0100
Subject: [PATCH 6/7] fix: add correct class

---
 .../collection-[collection]/settings/+page.svelte          | 3 ++-
 .../collection-[collection]/wizard/step2.svelte            | 3 ++-
 .../storage/bucket-[bucket]/create.svelte                  | 7 +++++--
 .../storage/bucket-[bucket]/settings/+page.svelte          | 3 ++-
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
index 0ba34d889..bf401a66e 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
@@ -199,7 +199,8 @@
                 the <a
                     href="https://appwrite.io/docs/permissions"
                     target="_blank"
-                    rel="noopener noreferrer">Permissions Guide</a> in our documentation.
+                    rel="noopener noreferrer"
+                    class="link">Permissions Guide</a> in our documentation.
             </p>
             <svelte:fragment slot="aside">
                 {#if collectionPermissions}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
index 0768461c1..1024dcba2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
@@ -12,7 +12,8 @@
         Choose who can access your collection and documents. For more information, check out the <a
             href="https://appwrite.io/docs/permissions"
             target="_blank"
-            rel="noopener noreferrer">Permissions Guide</a> in our documentation.
+            rel="noopener noreferrer"
+            class="link">Permissions Guide</a> in our documentation.
     </svelte:fragment>
     {#if $collection.documentSecurity}
         <div class="common-section">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
index 5872087f1..da6046ee3 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
@@ -68,8 +68,11 @@
         <Heading tag="h6" size="7">Update Permissions</Heading>
         <p class="text">
             Choose who can access your buckets and files. For more information, check out the
-            <a href="https://appwrite.io/docs/permissions" target="_blank" rel="noopener noreferrer"
-                >Permissions Guide</a> in our documentation.
+            <a
+                href="https://appwrite.io/docs/permissions"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="link">Permissions Guide</a> in our documentation.
         </p>
         {#if $bucket.fileSecurity}
             <div class="common-section">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
index 393eac3e9..b7fd139e5 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
@@ -275,7 +275,8 @@
                     the <a
                         href="https://appwrite.io/docs/permissions"
                         target="_blank"
-                        rel="noopener noreferrer">Permissions Guide</a> in our documentation.
+                        rel="noopener noreferrer"
+                        class="link">Permissions Guide</a> in our documentation.
                 </p>
                 <svelte:fragment slot="aside">
                     {#if bucketPermissions}

From 9c5fea103d484895a0f61071fe73607e92415609 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 25 Nov 2022 14:49:50 +0100
Subject: [PATCH 7/7] feat: remove files from list

---
 src/lib/components/uploadBox.svelte | 19 ++++++++++++-------
 src/lib/stores/uploader.ts          |  7 ++++++-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index e3fd1c437..0d0c1dc20 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -6,10 +6,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
 
-    async function removeFile($id: string, bucketId: string) {
-        const file = await sdkForProject.storage.getFile(bucketId, $id);
-        uploader.removeFile(file);
-    }
+    let hovering = false;
 
     const getPreview = (fileId: string, bucketId: string) =>
         sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
@@ -30,7 +27,7 @@
                 <span class="icon-cheveron-up" aria-hidden="true" />
             </button>
             <button
-                on:click={() => uploader.close()}
+                on:click={() => uploader.reset()}
                 class="icon-button"
                 aria-label="close upload box">
                 <span class="icon-x" aria-hidden="true" />
@@ -53,7 +50,15 @@
                             </div>
 
                             <label for={file.name} class="file-name u-trim">{file.name}</label>
-                            <span class="icon-check" />
+
+                            <button
+                                class="icon-button"
+                                aria-label="Failed"
+                                on:mouseenter={() => (hovering = true)}
+                                on:mouseleave={() => (hovering = false)}
+                                on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
+                                <span class:icon-check={!hovering} class:icon-x={hovering} />
+                            </button>
                         </a>
                     {:else if file.failed}
                         <li class="upload-box-item">
@@ -71,7 +76,7 @@
                             <button
                                 class="icon-button"
                                 aria-label="Failed"
-                                on:click={() => removeFile(file.$id, file.bucketId)}>
+                                on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
                                 <span class="icon-x" />
                             </button>
                         </li>
diff --git a/src/lib/stores/uploader.ts b/src/lib/stores/uploader.ts
index 86b7b31aa..9538d0b79 100644
--- a/src/lib/stores/uploader.ts
+++ b/src/lib/stores/uploader.ts
@@ -42,7 +42,6 @@ const createUploader = () => {
         close: () =>
             update((n) => {
                 n.isOpen = !n.isOpen;
-
                 return n;
             }),
         toggle: () =>
@@ -89,6 +88,12 @@ const createUploader = () => {
             newFile.completed = true;
             updateFile(newFile.$id, newFile);
         },
+        removeFromQueue: (id: string) => {
+            update((n) => {
+                n.files = n.files.filter((f) => f.$id !== id);
+                return n;
+            });
+        },
         removeFile: async (file: Models.File) => {
             if (file.chunksTotal === file.chunksUploaded) {
                 return update((n) => {