From e3256650bacb812f1ea6ca3633a997750737f71a Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Feb 2023 21:34:59 +0000
Subject: [PATCH 01/11] refactor: change create file from modal to wizard

---
 src/lib/elements/forms/inputFile.svelte       |  5 ++
 .../{[[page]] => }/+page.svelte               | 55 ++++++++---------
 .../bucket-[bucket]/{[[page]] => }/+page.ts   |  0
 .../bucket-[bucket]/create/create.svelte      | 60 +++++++++++++++++++
 .../bucket-[bucket]/create/step1.svelte       | 44 ++++++++++++++
 .../bucket-[bucket]/create/step2.svelte       | 43 +++++++++++++
 .../storage/bucket-[bucket]/create/store.ts   | 24 ++++++++
 7 files changed, 201 insertions(+), 30 deletions(-)
 rename src/routes/console/project-[project]/storage/bucket-[bucket]/{[[page]] => }/+page.svelte (93%)
 rename src/routes/console/project-[project]/storage/bucket-[bucket]/{[[page]] => }/+page.ts (100%)
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create/create.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create/step1.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create/store.ts

diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index 2db31eaef4..c5e29f0a04 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { onMount } from 'svelte';
     import { Helper } from '.';
 
     export let label: string = null;
@@ -47,6 +48,10 @@
     }
 
     $: fileArray = files?.length ? Array.from(files) : [];
+
+    onMount(() => {
+        input.files = files;
+    });
 </script>
 
 <input
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
similarity index 93%
rename from src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
index 69bd8ab006..498883b73e 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,45 +1,45 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { sdkForProject } from '$lib/stores/sdk';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import {
-        Empty,
-        EmptySearch,
-        Pagination,
         Avatar,
         DropList,
         DropListItem,
         DropListLink,
+        Empty,
+        EmptySearch,
+        Pagination,
         SearchQuery
     } from '$lib/components';
-    import Create from '../create.svelte';
-    import Delete from '../deleteFile.svelte';
+    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+    import { Pill } from '$lib/elements';
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
-        TableHeader,
         TableBody,
-        TableRowLink,
-        TableRow,
+        TableCell,
         TableCellHead,
         TableCellText,
-        TableCell
+        TableHeader,
+        TableRow,
+        TableRowLink
     } from '$lib/elements/table';
     import { toLocaleDate } from '$lib/helpers/date';
     import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Container } from '$lib/layout';
-    import { base } from '$app/paths';
-    import type { Models } from '@aw-labs/appwrite-console';
-    import { uploader } from '$lib/stores/uploader';
     import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { uploader } from '$lib/stores/uploader';
+    import { wizard } from '$lib/stores/wizard';
+    import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
-    import { invalidate } from '$app/navigation';
-    import { Dependencies, PAGE_LIMIT } from '$lib/constants';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import CreateWizard from './create/create.svelte';
+    import Delete from './deleteFile.svelte';
 
     export let data: PageData;
 
-    let showCreate = false;
     let showDelete = false;
     let showDropdown = [];
     let selectedFile: Models.File = null;
@@ -49,11 +49,6 @@
     const getPreview = (fileId: string) =>
         sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
 
-    function fileCreated() {
-        showCreate = false;
-        invalidate(Dependencies.FILES);
-    }
-
     function fileDeleted(event: CustomEvent<Models.File>) {
         showDelete = false;
         uploader.removeFile(event.detail);
@@ -78,8 +73,9 @@
 
 <Container>
     <SearchQuery search={data.search} placeholder="Search by filename">
-        <Button on:click={() => (showCreate = true)} event="create_file">
-            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create file</span>
+        <Button on:click={() => wizard.start(CreateWizard)} event="create_file">
+            <span class="icon-plus" aria-hidden="true" />
+            <span class="text">Create file</span>
         </Button>
     </SearchQuery>
 
@@ -97,7 +93,7 @@
                     {#if file.chunksTotal / file.chunksUploaded !== 1}
                         <TableRow>
                             <TableCell title="Name">
-                                <div class="u-flex u-gap-12 u-main-space-between">
+                                <div class="u-flex u-gap-12 u-main-space-between u-cross-center">
                                     <span class="avatar is-size-small is-color-empty" />
 
                                     <span class="text u-trim">{file.name}</span>
@@ -136,7 +132,7 @@
                         <TableRowLink
                             href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}>
                             <TableCell title="Name">
-                                <div class="u-flex u-gap-12">
+                                <div class="u-flex u-gap-12 u-cross-center">
                                     <Avatar size={32} src={getPreview(file.$id)} name={file.name} />
                                     <span class="text u-trim">{file.name}</span>
                                 </div>
@@ -213,11 +209,10 @@
             single
             href="https://appwrite.io/docs/storage#createFile"
             target="file"
-            on:click={() => (showCreate = true)} />
+            on:click={() => wizard.start(CreateWizard)} />
     {/if}
 </Container>
 
-<Create bind:showCreate on:created={fileCreated} />
 {#if selectedFile}
     <Delete file={selectedFile} bind:showDelete on:deleted={fileDeleted} />
 {/if}
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
similarity index 100%
rename from src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.ts
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/create.svelte
new file mode 100644
index 0000000000..2fb30235c2
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/create.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Dependencies } from '$lib/constants';
+    import type { WizardStepsType } from '$lib/layout/wizard.svelte';
+    import Wizard from '$lib/layout/wizard.svelte';
+    import { addNotification } from '$lib/stores/notifications';
+    import { uploader } from '$lib/stores/uploader';
+    import { wizard } from '$lib/stores/wizard';
+    import { ID } from '@aw-labs/appwrite-console';
+    import Step1 from './step1.svelte';
+    import Step2 from './step2.svelte';
+    import { createFile } from './store';
+
+    const bucketId = $page.params.bucket;
+
+    const stepComponents: WizardStepsType = new Map();
+
+    stepComponents.set(1, {
+        component: Step1,
+        label: 'Upload a file'
+    });
+
+    stepComponents.set(2, {
+        component: Step2,
+        label: 'Update permissions'
+    });
+
+    async function create() {
+        try {
+            await uploader.uploadFile(
+                bucketId,
+                $createFile.id ?? ID.unique(),
+                $createFile.files[0],
+                $createFile.permissions
+            );
+
+            createFile.reset();
+            wizard.hide();
+            invalidate(Dependencies.FILES);
+
+            addNotification({
+                type: 'success',
+                message: `File has been uploaded`
+            });
+            trackEvent(Submit.FileCreate, {
+                customId: !!$createFile.id
+            });
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+            trackError(e, Submit.FileCreate);
+        }
+    }
+</script>
+
+<Wizard title="Upload file" steps={stepComponents} on:exit={createFile.reset} on:finish={create} />
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step1.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step1.svelte
new file mode 100644
index 0000000000..9dd49dc1e6
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step1.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { CustomId } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { FormList, InputFile } from '$lib/elements/forms';
+    import WizardStep from '$lib/layout/wizardStep.svelte';
+    import { bucket } from '../store';
+    import { createFile } from './store';
+
+    let showCustomId = false;
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Upload a File</svelte:fragment>
+    <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
+    <FormList>
+        <div>
+            <InputFile
+                required
+                bind:files={$createFile.files}
+                allowedFileExtensions={$bucket.allowedFileExtensions}
+                maxSize={$bucket.maximumFileSize} />
+        </div>
+
+        {#if !showCustomId}
+            <div>
+                <Pill button on:click={() => (showCustomId = !showCustomId)}>
+                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
+                        File ID
+                    </span>
+                </Pill>
+            </div>
+        {:else}
+            <div class="custom-id-wrapper">
+                <CustomId bind:show={showCustomId} name="File" bind:id={$createFile.id} />
+            </div>
+        {/if}
+    </FormList>
+</WizardStep>
+
+<style lang="scss">
+    .custom-id-wrapper :global(.is-inner-modal) {
+        inline-size: auto;
+    }
+</style>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte
new file mode 100644
index 0000000000..8ea672ecfc
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Alert from '$lib/components/alert.svelte';
+    import Permissions from '$lib/components/permissions/permissions.svelte';
+    import WizardStep from '$lib/layout/wizardStep.svelte';
+    import { bucket } from '../store';
+    import { createFile } from './store';
+</script>
+
+<WizardStep>
+    <svelte:fragment slot="title">Update Permissions</svelte:fragment>
+    <svelte:fragment slot="subtitle"
+        >Choose who can get access to your buckets and files. For more information, check out the
+        Permissions Guide in our documentation.</svelte:fragment>
+
+    <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"
+            class="link">
+            Permissions Guide
+        </a>.
+    </p>
+    {#if $bucket.fileSecurity}
+        <div class="common-section">
+            <Alert type="info">
+                <svelte:fragment slot="title">File security enabled</svelte:fragment>
+                Users will be able to access this file if they have been granted
+                <b>either File or Bucket permissions</b>.
+            </Alert>
+        </div>
+        <div class="common-section">
+            <Permissions bind:permissions={$createFile.permissions} />
+        </div>
+    {:else}
+        <Alert type="info">
+            <svelte:fragment slot="title">File security disabled</svelte:fragment>
+            If you want to assign file permissions, navigate to Bucket settings and enable file security.
+            Otherwise, only Bucket permissions will be used.
+        </Alert>
+    {/if}
+</WizardStep>
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/store.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/store.ts
new file mode 100644
index 0000000000..6a6eb9248d
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create/store.ts
@@ -0,0 +1,24 @@
+import { writable } from 'svelte/store';
+
+type CreateFile = {
+    files: FileList | null;
+    id: string | null;
+    permissions: string[];
+};
+
+const initialState: CreateFile = {
+    files: null,
+    id: null,
+    permissions: []
+};
+
+export const createFile = (function initialize() {
+    const store = writable<CreateFile>({ ...initialState });
+
+    return {
+        ...store,
+        reset() {
+            store.set({ ...initialState });
+        }
+    };
+})();

From 46de1b802af695b9d7106d4631c665a1bdd9b597 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Feb 2023 18:15:52 +0000
Subject: [PATCH 02/11] fix: text and small changes

---
 .../storage/bucket-[bucket]/+page.svelte      |   2 +-
 .../{create => create-file}/create.svelte     |   0
 .../{create => create-file}/step1.svelte      |   0
 .../{create => create-file}/step2.svelte      |  10 +-
 .../{create => create-file}/store.ts          |   0
 .../storage/bucket-[bucket]/create.svelte     | 106 ------------------
 6 files changed, 4 insertions(+), 114 deletions(-)
 rename src/routes/console/project-[project]/storage/bucket-[bucket]/{create => create-file}/create.svelte (100%)
 rename src/routes/console/project-[project]/storage/bucket-[bucket]/{create => create-file}/step1.svelte (100%)
 rename src/routes/console/project-[project]/storage/bucket-[bucket]/{create => create-file}/step2.svelte (85%)
 rename src/routes/console/project-[project]/storage/bucket-[bucket]/{create => create-file}/store.ts (100%)
 delete mode 100644 src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte

diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
index 498883b73e..84cf437ab5 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -35,7 +35,7 @@
     import { wizard } from '$lib/stores/wizard';
     import type { Models } from '@aw-labs/appwrite-console';
     import type { PageData } from './$types';
-    import CreateWizard from './create/create.svelte';
+    import CreateWizard from './create-file/create.svelte';
     import Delete from './deleteFile.svelte';
 
     export let data: PageData;
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
similarity index 100%
rename from src/routes/console/project-[project]/storage/bucket-[bucket]/create/create.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step1.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
similarity index 100%
rename from src/routes/console/project-[project]/storage/bucket-[bucket]/create/step1.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
similarity index 85%
rename from src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
index 8ea672ecfc..4b1943da82 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/step2.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
@@ -8,11 +8,7 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Update Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-        >Choose who can get access to your buckets and files. For more information, check out the
-        Permissions Guide in our documentation.</svelte:fragment>
-
-    <p class="text">
+    <svelte:fragment slot="subtitle">
         Choose who can access your buckets and files. For more information, check out the
         <a
             href="https://appwrite.io/docs/permissions"
@@ -20,8 +16,8 @@
             rel="noopener noreferrer"
             class="link">
             Permissions Guide
-        </a>.
-    </p>
+        </a>.</svelte:fragment>
+
     {#if $bucket.fileSecurity}
         <div class="common-section">
             <Alert type="info">
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create/store.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/store.ts
similarity index 100%
rename from src/routes/console/project-[project]/storage/bucket-[bucket]/create/store.ts
rename to src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/store.ts
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
deleted file mode 100644
index 5bdc48bf38..0000000000
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-    import { Button, FormList, InputFile } from '$lib/elements/forms';
-    import { Pill } from '$lib/elements';
-    import { Modal, CustomId, Heading, Alert } from '$lib/components';
-    import { createEventDispatcher } from 'svelte';
-    import { page } from '$app/stores';
-    import { uploader } from '$lib/stores/uploader';
-    import { bucket } from './store';
-    import { Permissions } from '$lib/components/permissions';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { ID } from '@aw-labs/appwrite-console';
-
-    export let showCreate = false;
-
-    const bucketId = $page.params.bucket;
-    const dispatch = createEventDispatcher();
-
-    let files: FileList;
-    let permissions: string[] = [];
-    let id: string = null;
-    let error: string;
-    let showCustomId = false;
-
-    async function create() {
-        try {
-            showCreate = false;
-            await uploader.uploadFile(bucketId, id ?? ID.unique(), files[0], permissions);
-            files = null;
-            showCustomId = false;
-            dispatch('created');
-            addNotification({
-                type: 'success',
-                message: `File has been uploaded`
-            });
-            trackEvent(Submit.FileCreate, {
-                customId: !!id
-            });
-        } catch (e) {
-            error = e.message;
-            trackError(e, Submit.FileCreate);
-        }
-    }
-
-    $: if (!showCreate) {
-        id = files = error = null;
-        permissions = [];
-    }
-</script>
-
-<Modal size="big" {error} bind:show={showCreate} on:submit={create}>
-    <svelte:fragment slot="header">Create File</svelte:fragment>
-    <FormList>
-        <div>
-            <InputFile
-                bind:files
-                allowedFileExtensions={$bucket.allowedFileExtensions}
-                maxSize={$bucket.maximumFileSize} />
-        </div>
-
-        {#if !showCustomId}
-            <div>
-                <Pill button on:click={() => (showCustomId = !showCustomId)}>
-                    <span class="icon-pencil" aria-hidden="true" /><span class="text">
-                        File ID
-                    </span>
-                </Pill>
-            </div>
-        {:else}
-            <CustomId bind:show={showCustomId} name="File" bind:id />
-        {/if}
-        <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"
-                class="link">
-                Permissions Guide
-            </a>.
-        </p>
-        {#if $bucket.fileSecurity}
-            <div class="common-section">
-                <Alert type="info">
-                    <svelte:fragment slot="title">File security enabled</svelte:fragment>
-                    Users will be able to access this file if they have been granted
-                    <b>either File or Bucket permissions</b>.
-                </Alert>
-            </div>
-            <div class="common-section">
-                <Permissions bind:permissions />
-            </div>
-        {:else}
-            <Alert type="info">
-                <svelte:fragment slot="title">File security disabled</svelte:fragment>
-                If you want to assign file permissions, navigate to Bucket settings and enable file security.
-                Otherwise, only Bucket permissions will be used.
-            </Alert>
-        {/if}
-    </FormList>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        <Button submit>Create</Button>
-    </svelte:fragment>
-</Modal>

From affc5298a5e19e1c0c05890cb8a4bd547b4e836c Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 23 Feb 2023 16:52:34 +0000
Subject: [PATCH 03/11] fix: file input element and state not syncing

---
 src/lib/elements/forms/inputFile.svelte | 29 ++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index c5e29f0a04..e28c36b2d4 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -6,7 +6,7 @@
 
     export let label: string = null;
     export let files: FileList;
-    export let list = new DataTransfer();
+
     export let allowedFileExtensions: string[] = [];
     export let maxSize: number = null;
     export let required = false;
@@ -15,16 +15,25 @@
     let input: HTMLInputElement;
     let hovering = false;
 
+    function setFiles(value: FileList) {
+        files = value;
+        input.files = value;
+    }
+
+    function resetFiles() {
+        setFiles(new DataTransfer().files);
+    }
+
     function dropHandler(ev: DragEvent) {
         ev.dataTransfer.dropEffect = 'move';
         hovering = false;
-        if (ev.dataTransfer.items) {
-            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                if (ev.dataTransfer.items[i].kind === 'file') {
-                    list.items.clear();
-                    list.items.add(ev.dataTransfer.items[i].getAsFile());
-                    files = list.files;
-                }
+        if (!ev.dataTransfer.items) return;
+
+        for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+            if (ev.dataTransfer.items[i].kind === 'file') {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(ev.dataTransfer.items[i].getAsFile());
+                setFiles(dataTransfer.files);
             }
         }
     }
@@ -50,7 +59,7 @@
     $: fileArray = files?.length ? Array.from(files) : [];
 
     onMount(() => {
-        input.files = files;
+        setFiles(files);
     });
 </script>
 
@@ -128,7 +137,7 @@
                                 {fileSize.value + fileSize.unit}
                             </span>
                             <button
-                                on:click={() => (files = null)}
+                                on:click={resetFiles}
                                 type="button"
                                 class="button is-text is-only-icon u-margin-inline-start-auto"
                                 aria-label="remove file"

From 8fff4ed32ddb25ce6449c4f48efd3b6c0776c3ce Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 23 Feb 2023 23:38:09 +0000
Subject: [PATCH 04/11] fix: wizard spacing issues

---
 src/lib/layout/wizardStep.svelte              |  9 ++-
 .../platforms/wizard/android/step2.svelte     | 10 ++-
 .../platforms/wizard/apple/step3.svelte       |  4 +-
 .../platforms/wizard/flutter/step1.svelte     | 79 +++++++++---------
 .../platforms/wizard/flutter/step2.svelte     |  2 +-
 .../platforms/wizard/web/step2.svelte         | 81 ++++++++++---------
 6 files changed, 104 insertions(+), 81 deletions(-)

diff --git a/src/lib/layout/wizardStep.svelte b/src/lib/layout/wizardStep.svelte
index 73e50eeac2..8b7d1561fd 100644
--- a/src/lib/layout/wizardStep.svelte
+++ b/src/lib/layout/wizardStep.svelte
@@ -12,7 +12,7 @@
     }
 </script>
 
-<header class="form-header">
+<header class="form-header" class:hide-divider={!$$slots.subtitle}>
     <Heading tag="h1" size="6">
         <slot name="title" />
     </Heading>
@@ -24,3 +24,10 @@
 </header>
 
 <slot />
+
+<style>
+    .hide-divider {
+        padding-block-end: 0;
+        border-block-end: none;
+    }
+</style>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
index 95839d15ce..37e9f22cf6 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -12,7 +12,15 @@
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
     <p>First, add this to your root level build.gradle file:</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example1} withCopy />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Groovy"
+            labelIcon="android"
+            language="kotlin"
+            code={example1}
+            withCopy
+            noMargin />
+    </div>
     <p class="common-section">And add this to your project's build.gradle file:</p>
     <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
index fe5be13fcc..ca35a8faac 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -16,12 +16,12 @@ let client = Client()
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
     <h2 class="heading-level-7">Init your SDK</h2>
-    <p>
+    <p class="u-margin-block-start-8">
         Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
         can be found in your project settings page.
     </p>
     <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
-    <p>
+    <p class="u-margin-block-start-24">
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.
     </p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
index f44ea388b7..becffec6ea 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte
@@ -110,46 +110,45 @@
 
 <WizardStep {beforeSubmit}>
     <svelte:fragment slot="title">Register your Flutter app</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
-            <Pill
-                button
-                on:click={() => (platform = Platform.Android)}
-                selected={platform === Platform.Android}>
-                Android
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = Platform.Ios)}
-                selected={platform === Platform.Ios}>
-                iOS
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = Platform.Linux)}
-                selected={platform === Platform.Linux}>
-                Linux
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = Platform.Macos)}
-                selected={platform === Platform.Macos}>
-                Mac OS
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = Platform.Windows)}
-                selected={platform === Platform.Windows}>
-                Windows
-            </Pill>
-            <Pill
-                button
-                on:click={() => (platform = Platform.Web)}
-                selected={platform === Platform.Web}>
-                Web
-            </Pill>
-        </div>
-    </svelte:fragment>
+
+    <div class="u-flex u-gap-16 u-margin-block-start-8 u-flex-wrap">
+        <Pill
+            button
+            on:click={() => (platform = Platform.Android)}
+            selected={platform === Platform.Android}>
+            Android
+        </Pill>
+        <Pill
+            button
+            on:click={() => (platform = Platform.Ios)}
+            selected={platform === Platform.Ios}>
+            iOS
+        </Pill>
+        <Pill
+            button
+            on:click={() => (platform = Platform.Linux)}
+            selected={platform === Platform.Linux}>
+            Linux
+        </Pill>
+        <Pill
+            button
+            on:click={() => (platform = Platform.Macos)}
+            selected={platform === Platform.Macos}>
+            Mac OS
+        </Pill>
+        <Pill
+            button
+            on:click={() => (platform = Platform.Windows)}
+            selected={platform === Platform.Windows}>
+            Windows
+        </Pill>
+        <Pill
+            button
+            on:click={() => (platform = Platform.Web)}
+            selected={platform === Platform.Web}>
+            Web
+        </Pill>
+    </div>
 
     <FormList isCommonSection>
         <InputText
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
index 7d7dc3551f..b629896df3 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -12,7 +12,7 @@
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
     <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
-    <Code label="YAML" language="yml" code={example1} withCopy />
+    <Code label="YAML" language="yml" code={example1} withCopy noMargin />
     <p class="common-section">
         You can also install the SDK using the Dart package manager from your terminal:
     </p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
index 9699669ff3..aeab08e592 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -22,40 +22,49 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose your preferred method of installation
-        <div class="u-flex u-gap-16 u-margin-block-start-8">
-            <Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
-                NPM
-            </Pill>
-            <Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
-                CDN
-            </Pill>
-        </div>
-    </svelte:fragment>
-    {#if method === Method.NPM}
-        <p>
-            Use <a href="https://npmjs.org" target="_blank" rel="noopener noreferrer" class="link"
-                >NPM (node package manager)</a> from your command line to add Appwrite SDK to your project.
-        </p>
-        <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
-        <p class="common-section">
-            When you're using a bundler (like <a
-                href="https://vitejs.dev"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">Vite</a>
-            or
-            <a href="https://rollupjs.org" target="_blank" rel="noopener noreferrer" class="link"
-                >Rollup</a
-            >), import the Appwrite module when you need it:
-        </p>
-        <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
-    {:else if method === Method.CDN}
-        <p>
-            To install with a CDN (content delivery network) add the following scripts to the bottom
-            of your tag, but before you use any Appwrite services:
-        </p>
-        <Code label="HTML" language="html" code={example2} withCopy />
-    {/if}
+
+    <p>Choose your preferred method of installation</p>
+    <div class="u-flex u-gap-16 u-margin-block-start-8">
+        <Pill button on:click={() => (method = Method.NPM)} selected={method === Method.NPM}>
+            NPM
+        </Pill>
+        <Pill button on:click={() => (method = Method.CDN)} selected={method === Method.CDN}>
+            CDN
+        </Pill>
+    </div>
+
+    <div class="u-margin-block-start-32">
+        {#if method === Method.NPM}
+            <p>
+                Use
+                <a href="https://npmjs.org" target="_blank" rel="noopener noreferrer" class="link"
+                    >NPM (node package manager)</a> from your command line to add Appwrite SDK to your
+                project.
+            </p>
+            <div class="u-margin-block-start-16">
+                <Code label="Bash" language="sh" code="npm install appwrite" withCopy noMargin />
+            </div>
+            <p class="common-section">
+                When you're using a bundler (like <a
+                    href="https://vitejs.dev"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">Vite</a>
+                or
+                <a
+                    href="https://rollupjs.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="link">Rollup</a
+                >), import the Appwrite module when you need it:
+            </p>
+            <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
+        {:else if method === Method.CDN}
+            <p>
+                To install with a CDN (content delivery network) add the following scripts to the
+                bottom of your tag, but before you use any Appwrite services:
+            </p>
+            <Code label="HTML" language="html" code={example2} withCopy />
+        {/if}
+    </div>
 </WizardStep>

From f6ff291de1a7a38a5bba0a69ce2d4a9150efafb0 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 24 Feb 2023 10:26:21 +0000
Subject: [PATCH 05/11] fix: more spacings

---
 .../overview/platforms/wizard/flutter/step2.svelte    |  4 +++-
 .../overview/platforms/wizard/flutter/step3.svelte    | 11 ++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
index b629896df3..fa2fb7330c 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -12,7 +12,9 @@
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
     <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
-    <Code label="YAML" language="yml" code={example1} withCopy noMargin />
+    <div class="u-margin-block-start-16">
+        <Code label="YAML" language="yml" code={example1} withCopy noMargin />
+    </div>
     <p class="common-section">
         You can also install the SDK using the Dart package manager from your terminal:
     </p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
index 6f46f657d4..a6099687e6 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -21,7 +21,16 @@ client
         Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
         can be found in your project settings page.
     </p>
-    <Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Flutter SDK"
+            labelIcon="flutter"
+            language="dart"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
     <p class="common-section">
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.

From 448719cd51e3fe6758af0daffc1c2b84ceee7a5d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 27 Feb 2023 10:57:12 +0000
Subject: [PATCH 06/11] refactor: wizard spacings

---
 .../platforms/wizard/android/step2.svelte     | 10 +++++++++-
 .../platforms/wizard/android/step3.svelte     | 17 +++++++++-------
 .../platforms/wizard/apple/step2.svelte       | 20 +++++++++++++++++--
 .../platforms/wizard/apple/step3.svelte       | 11 +++++++++-
 .../platforms/wizard/flutter/step2.svelte     |  5 ++++-
 .../platforms/wizard/web/step2.svelte         | 14 +++++++++++--
 .../platforms/wizard/web/step3.svelte         | 11 +++++++++-
 7 files changed, 73 insertions(+), 15 deletions(-)

diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
index 37e9f22cf6..d7af619224 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -22,5 +22,13 @@
             noMargin />
     </div>
     <p class="common-section">And add this to your project's build.gradle file:</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Groovy"
+            labelIcon="android"
+            language="kotlin"
+            code={example2}
+            withCopy
+            noMargin />
+    </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
index 08a6581eba..81d857bb65 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -21,11 +21,14 @@ val client = Client(context)
         Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
         can be found in your project settings page.
     </p>
-    <Code
-        label="Android SDK"
-        labelIcon="android"
-        language="kotlin"
-        {code}
-        withCopy
-        withLineNumbers />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Android SDK"
+            labelIcon="android"
+            language="kotlin"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
index 8884288816..31d99d5b84 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -71,9 +71,25 @@
             </ol>
         {:else if method === Method.Swift}
             <p>Add this to your Package.swift file:</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
+            <div class="u-margin-block-start-16">
+                <Code
+                    withCopy
+                    withLineNumbers
+                    label="Swift"
+                    language="swift"
+                    code={example1}
+                    noMargin />
+            </div>
             <p class="common-section">Then add the dependency to your target:</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
+            <div class="u-margin-block-start-16">
+                <Code
+                    withCopy
+                    withLineNumbers
+                    label="Swift"
+                    language="swift"
+                    code={example2}
+                    noMargin />
+            </div>
         {/if}
     </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
index ca35a8faac..5adcc84eb3 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -20,7 +20,16 @@ let client = Client()
         Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
         can be found in your project settings page.
     </p>
-    <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Apple SDK"
+            labelIcon="apple"
+            language="swift"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
     <p class="u-margin-block-start-24">
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
index fa2fb7330c..b49863fbf6 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -15,8 +15,11 @@
     <div class="u-margin-block-start-16">
         <Code label="YAML" language="yml" code={example1} withCopy noMargin />
     </div>
+
     <p class="common-section">
         You can also install the SDK using the Dart package manager from your terminal:
     </p>
-    <Code label="Bash" language="sh" code={example2} withCopy />
+    <div class="u-margin-block-start-16">
+        <Code label="Bash" language="sh" code={example2} withCopy noMargin />
+    </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
index aeab08e592..fa0e144930 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -58,13 +58,23 @@
                     class="link">Rollup</a
                 >), import the Appwrite module when you need it:
             </p>
-            <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
+            <div class="u-margin-block-start-16">
+                <Code
+                    label="Web SDK"
+                    labelIcon="code"
+                    language="js"
+                    code={example1}
+                    withCopy
+                    noMargin />
+            </div>
         {:else if method === Method.CDN}
             <p>
                 To install with a CDN (content delivery network) add the following scripts to the
                 bottom of your tag, but before you use any Appwrite services:
             </p>
-            <Code label="HTML" language="html" code={example2} withCopy />
+            <div class="u-margin-block-start-16">
+                <Code label="HTML" language="html" code={example2} withCopy noMargin />
+            </div>
         {/if}
     </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
index c9685da2ef..2f2a22296d 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
@@ -19,5 +19,14 @@ client
         Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
         can be found in your project settings page.
     </p>
-    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Web SDK"
+            labelIcon="code"
+            language="js"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
 </WizardStep>

From 192bb8cee9ae2936b9982f82e5364a055e5e29b7 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 9 Mar 2023 11:29:54 +0000
Subject: [PATCH 07/11] refactor: change wizard title

---
 .../storage/bucket-[bucket]/create-file/create.svelte           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
index 2fb30235c2..5824898f5e 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
@@ -57,4 +57,4 @@
     }
 </script>
 
-<Wizard title="Upload file" steps={stepComponents} on:exit={createFile.reset} on:finish={create} />
+<Wizard title="Create file" steps={stepComponents} on:exit={createFile.reset} on:finish={create} />

From 800d5c0a418ee6c51474b71d52205c74ffa11226 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 16:22:24 +0000
Subject: [PATCH 08/11] fix: file input overflow

---
 .../storage/bucket-[bucket]/create-file/step1.svelte            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index 9dd49dc1e6..3d0e4f5407 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -13,7 +13,7 @@
     <svelte:fragment slot="title">Upload a File</svelte:fragment>
     <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
     <FormList>
-        <div>
+        <div class="u-width-full-line u-overflow-hidden">
             <InputFile
                 required
                 bind:files={$createFile.files}

From fdff33e36e87668d35c42ee828aa95c2d5c645cf Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 17 Apr 2023 11:50:40 +0100
Subject: [PATCH 09/11] refactor: update copy

---
 .../storage/bucket-[bucket]/create-file/create.svelte           | 2 +-
 .../storage/bucket-[bucket]/create-file/step1.svelte            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
index 5824898f5e..736c2f25a0 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
@@ -19,7 +19,7 @@
 
     stepComponents.set(1, {
         component: Step1,
-        label: 'Upload a file'
+        label: 'Create file'
     });
 
     stepComponents.set(2, {
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
index 3d0e4f5407..3a9290472f 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step1.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Upload a File</svelte:fragment>
+    <svelte:fragment slot="title">Create file</svelte:fragment>
     <svelte:fragment slot="subtitle">Upload a file to add it to your bucket.</svelte:fragment>
     <FormList>
         <div class="u-width-full-line u-overflow-hidden">

From 6bb522954d6ef11b77aabb4bdcac366a06eafc21 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 17 Apr 2023 12:05:43 +0100
Subject: [PATCH 10/11] fix: fix merge breaking changes

---
 src/lib/stores/wizard.ts                      |  2 +-
 .../storage/bucket-[bucket]/+page.ts          | 21 ++++++++++---------
 .../bucket-[bucket]/create-file/create.svelte |  2 +-
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/lib/stores/wizard.ts b/src/lib/stores/wizard.ts
index 355eb7afce..b349d62063 100644
--- a/src/lib/stores/wizard.ts
+++ b/src/lib/stores/wizard.ts
@@ -20,7 +20,7 @@ function createWizardStore() {
     return {
         subscribe,
         set,
-        start: (component: typeof SvelteComponent, media: string = null) =>
+        start: <CMP extends typeof SvelteComponent>(component: CMP, media: string = null) =>
             update((n) => {
                 n.show = true;
                 n.component = component;
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
index 0c15a026ef..219c82b34a 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.ts
@@ -1,22 +1,23 @@
-import { Query } from '@aw-labs/appwrite-console';
-import { sdkForProject } from '$lib/stores/sdk';
-import { pageToOffset } from '$lib/helpers/load';
+import { Query } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+import { getLimit, getPage, getSearch, pageToOffset } from '$lib/helpers/load';
 import { Dependencies, PAGE_LIMIT } from '$lib/constants';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ params, parent, depends, url }) => {
-    await parent();
+export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.FILES);
-    const page = Number(params.page);
-    const offset = pageToOffset(page, PAGE_LIMIT);
-    const search = url.search.slice(1) ?? undefined;
+    const page = getPage(url);
+    const search = getSearch(url);
+    const limit = getLimit(url, route, PAGE_LIMIT);
+    const offset = pageToOffset(page, limit);
 
     return {
         offset,
+        limit,
         search,
-        files: await sdkForProject.storage.listFiles(
+        files: await sdk.forProject.storage.listFiles(
             params.bucket,
-            [Query.limit(PAGE_LIMIT), Query.offset(offset), Query.orderDesc('$createdAt')],
+            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
             search
         )
     };
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
index 736c2f25a0..df3f4494e3 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
@@ -8,7 +8,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { uploader } from '$lib/stores/uploader';
     import { wizard } from '$lib/stores/wizard';
-    import { ID } from '@aw-labs/appwrite-console';
+    import { ID } from '@appwrite.io/console';
     import Step1 from './step1.svelte';
     import Step2 from './step2.svelte';
     import { createFile } from './store';

From ce4863822ec7025706387a760d6ed03d02140011 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 12 Dec 2023 12:55:57 +0100
Subject: [PATCH 11/11] fix: some stuff after merge

---
 .../storage/bucket-[bucket]/+page.svelte              | 11 ++---------
 .../storage/bucket-[bucket]/create-file/create.svelte |  4 ++--
 .../storage/bucket-[bucket]/create-file/step2.svelte  |  2 +-
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
index 132b1ddce2..23efd27e2b 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte
@@ -1,6 +1,4 @@
 <script lang="ts" context="module">
-    let showCreate = writable(false);
-
     export const showCreateFile = () => {
         wizard.start(Create);
     };
@@ -43,9 +41,9 @@
     import { wizard } from '$lib/stores/wizard';
     import { tooltip } from '$lib/actions/tooltip';
     import { readOnly, showUsageRatesModal } from '$lib/stores/billing';
-    import { writable } from 'svelte/store';
     import { sdk } from '$lib/stores/sdk.js';
     import Create from './create-file/create.svelte';
+    import DeleteFile from './deleteFile.svelte';
 
     export let data;
 
@@ -59,11 +57,6 @@
     const getPreview = (fileId: string) =>
         sdk.forProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
 
-    async function fileCreated() {
-        $showCreate = false;
-        await invalidate(Dependencies.FILES);
-    }
-
     async function fileDeleted(event: CustomEvent<Models.File>) {
         showDelete = false;
         uploader.removeFile(event.detail);
@@ -268,5 +261,5 @@
 </Container>
 
 {#if selectedFile}
-    <Delete file={selectedFile} bind:showDelete on:deleted={fileDeleted} />
+    <DeleteFile file={selectedFile} bind:showDelete on:deleted={fileDeleted} />
 {/if}
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
index df3f4494e3..99c9895610 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/create.svelte
@@ -19,12 +19,12 @@
 
     stepComponents.set(1, {
         component: Step1,
-        label: 'Create file'
+        label: 'Create'
     });
 
     stepComponents.set(2, {
         component: Step2,
-        label: 'Update permissions'
+        label: 'Permissions'
     });
 
     async function create() {
diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
index 4b1943da82..6a98039ef0 100644
--- a/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
+++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/create-file/step2.svelte
@@ -11,7 +11,7 @@
     <svelte:fragment slot="subtitle">
         Choose who can access your buckets and files. For more information, check out the
         <a
-            href="https://appwrite.io/docs/permissions"
+            href="https://appwrite.io/docs/advanced/platform/permissions"
             target="_blank"
             rel="noopener noreferrer"
             class="link">