feat: upgrade input file

src/lib/elements/forms/inputFile.svelte

@@ -1,17 +1,74 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { Button } from '.';
 
-    export let id: string;
-    export let label: string;
-    export let showLabel = true;
+    export let label: string = null;
     export let files: FileList;
-    export let required = false;
-    export let disabled = false;
+
+    let list = new DataTransfer();
+    let input: HTMLInputElement;
+    let hovering = false;
+
+    function dropHandler(ev: DragEvent) {
+        hovering = false;
+        ev.preventDefault();
+        if (ev.dataTransfer.items) {
+            // Use DataTransferItemList interface to access the file(s)
+            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
+                // If dropped items aren't files, reject them
+                if (ev.dataTransfer.items[i].kind === 'file') {
+                    list.items.clear();
+                    list.items.add(ev.dataTransfer.items[i].getAsFile());
+                    files = list.files;
+                }
+            }
+        }
+    }
+
+    function dragOverHandler(ev: DragEvent) {
+        hovering = true;
+        ev.preventDefault();
+    }
 </script>
 
-<FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
-    <div class="input-text-wrapper">
-        <input {id} {disabled} {required} type="file" bind:files />
+<input bind:files bind:this={input} type="file" style="display: none" />
+
+<div>
+    {#if label}
+        <p class="text">{label}</p>
+    {/if}
+    <div
+        class="card is-border-dashed is-no-shadow"
+        class:is-hover-with-file={hovering}
+        on:drop|preventDefault={dropHandler}
+        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">
+                <span class="icon-upload" aria-hidden="true" />
+            </div>
+            <div class="u-grid u-gap-16">
+                <p>Drag and drop files here to upload</p>
+                <div class="u-flex u-gap-8 ">
+                    <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}
+                            <button
+                                on:click={() => (files = null)}
+                                type="button"
+                                class="x-button"
+                                aria-label="remove file"
+                                title="Remove file">
+                                <span class="icon-x" aria-hidden="true" />
+                            </button>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        </div>
     </div>
-</FormItem>
+</div>

src/routes/console/project-[project]/functions/function/[function]/create.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { InputChoice, Button, InputText, Form } from '$lib/elements/forms';
-    import { Modal, Collapsible, CollapsibleItem, Tabs, Tab } from '$lib/components';
+    import { InputChoice, Button, InputText, InputFile, Form } from '$lib/elements/forms';
+    import { Modal, Collapsible, CollapsibleItem, Tabs, Tab, Code } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { addNotification } from '$lib/stores/notifications';
@@ -13,13 +13,19 @@
     let entrypoint: string;
     let code: FileList;
     let active: boolean;
+    let files: FileList;
 
     const functionId = $page.params.function;
     const dispatch = createEventDispatcher();
 
     const create = async () => {
         try {
-            await sdkForProject.functions.createDeployment(functionId, entrypoint, code[0], active);
+            await sdkForProject.functions.createDeployment(
+                functionId,
+                entrypoint,
+                files[0],
+                active
+            );
             code = entrypoint = active = null;
             showCreate = false;
             dispatch('created');
@@ -30,6 +36,40 @@
             });
         }
     };
+
+    const codeSnippets = {
+        Unix: {
+            code: `
+appwrite functions createDeployment \\ \n
+    --functionId=${functionId} \\ \n
+    --entrypoint='index.js' \\ \n
+    --code="." \\ \n
+    --activate=true
+    `,
+            language: 'bash'
+        },
+
+        CMD: {
+            code: `
+appwrite functions createDeployment ^ \n
+    --functionId=${functionId} ^ \n
+    --entrypoint='index.js' ^ \n
+    --code="." ^ \n
+    --activate=true
+    `,
+            language: 'CMD'
+        },
+        PowerShell: {
+            code: `
+appwrite functions createDeployment , \n
+    --functionId=${functionId} , \n
+    --entrypoint='index.js' , \n
+    --code="." , \n
+    --activate=true
+    `,
+            language: 'PowerShell'
+        }
+    };
 </script>
 
 <Form noMargin on:submit={create}>
@@ -45,7 +85,7 @@
             <p class="text">
                 You can deploy your function from the Appwrite CLI using Unix, CMD, or PowerShell.
                 Check out our Documentation to learn more about <a
-                    href="#/"
+                    href="https://appwrite.io/docs/functions#deployFunction"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="link">deploying your functions</a
@@ -57,7 +97,12 @@
                 {#each ['Unix', 'CMD', 'PowerShell'] as category}
                     <CollapsibleItem>
                         <svelte:fragment slot="title">{category}</svelte:fragment>
-                        Code
+                        <Code
+                            showLineNumbers
+                            showCopy
+                            language="sh"
+                            label={codeSnippets[category].language}
+                            code={codeSnippets[category].code} />
                     </CollapsibleItem>
                 {/each}
             </Collapsible>
@@ -71,7 +116,7 @@
                     id="entrypoint"
                     bind:value={entrypoint}
                     required />
-                <!-- <InputFile label="Gzipped code (tar.gz)" id="file" required /> -->
+                <InputFile label="Gzipped code (tar.gz)" bind:files />
                 <InputChoice
                     label="Activate Deployment after build"
                     id="activate"

src/routes/console/project-[project]/functions/function/[function]/settings/uploadVariables.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Modal } from '$lib/components';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button, Form, InputFile } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { createEventDispatcher } from 'svelte';
     import { variableList } from '../../../store';
@@ -10,9 +10,7 @@
     const dispatch = createEventDispatcher();
 
     const functionId = $page.params.function;
-    let list = new DataTransfer();
     let files: FileList;
-    let input: HTMLInputElement;
 
     const handleSubmit = async () => {
         if (files?.length) {
@@ -51,29 +49,8 @@
             return variables;
         }
     }
-
-    function dropHandler(ev: DragEvent) {
-        ev.preventDefault();
-        if (ev.dataTransfer.items) {
-            // Use DataTransferItemList interface to access the file(s)
-            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                // If dropped items aren't files, reject them
-                if (ev.dataTransfer.items[i].kind === 'file') {
-                    list.items.clear();
-                    list.items.add(ev.dataTransfer.items[i].getAsFile());
-                    files = list.files;
-                }
-            }
-        }
-    }
-
-    function dragOverHandler(ev: DragEvent) {
-        ev.preventDefault();
-    }
 </script>
 
-<input bind:files bind:this={input} type="file" style="display: none" />
-
 <Form noMargin on:submit={handleSubmit}>
     <Modal bind:show>
         <svelte:fragment slot="header">Upload Variables</svelte:fragment>
@@ -82,37 +59,7 @@
             runtime.
         </p>
 
-        <p class="text">Attach a file</p>
-        <div
-            class="card is-border-dashed is-no-shadow"
-            on:drop|preventDefault={dropHandler}
-            on:dragover|preventDefault={dragOverHandler}>
-            <div class="u-flex u-main-center u-cross-center u-gap-32">
-                <div class="avatar is-size-large">
-                    <span class="icon-upload" aria-hidden="true" />
-                </div>
-                <div class="u-grid u-gap-16">
-                    <p>Drag and drop files here to upload</p>
-                    <div>
-                        <Button secondary on:click={() => input.click()}>
-                            <span class="icon-upload" aria-hidden="true" />
-                            <span class="text">Choose File</span>
-                        </Button>
-                        {#if files?.length}
-                            {files.item(0).name}
-                            <button
-                                on:click={() => (files = null)}
-                                type="button"
-                                class="x-button"
-                                aria-label="remove file"
-                                title="Remove file">
-                                <span class="icon-x" aria-hidden="true" />
-                            </button>
-                        {/if}
-                    </div>
-                </div>
-            </div>
-        </div>
+        <InputFile bind:files label="Attach a file" />
 
         <svelte:fragment slot="footer">
             <Button text on:click={() => (show = false)}>Cancel</Button>

src/routes/console/project-[project]/storage/bucket/[bucket]/_create.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Button, Form, FormList } from '$lib/elements/forms';
+    import { Button, Form, FormList, InputFile } from '$lib/elements/forms';
     import { Pill } from '$lib/elements';
     import { Modal, CustomId } from '$lib/components';
     import { sdkForProject } from '$lib/stores/sdk';
@@ -41,25 +41,6 @@
         }
     }
 
-    function dropHandler(ev: DragEvent) {
-        ev.preventDefault();
-        if (ev.dataTransfer.items) {
-            // Use DataTransferItemList interface to access the file(s)
-            for (let i = 0; i < ev.dataTransfer.items.length; i++) {
-                // If dropped items aren't files, reject them
-                if (ev.dataTransfer.items[i].kind === 'file') {
-                    list.items.clear();
-                    list.items.add(ev.dataTransfer.items[i].getAsFile());
-                    files = list.files;
-                }
-            }
-        }
-    }
-
-    function dragOverHandler(ev: DragEvent) {
-        ev.preventDefault();
-    }
-
     $: if (!showCreate) {
         id = files = error = null;
         list = new DataTransfer();
@@ -74,37 +55,7 @@
         <svelte:fragment slot="header">Upload File</svelte:fragment>
         <FormList>
             <div>
-                <div
-                    class="card is-border-dashed is-no-shadow"
-                    on:drop|preventDefault={dropHandler}
-                    on:dragover|preventDefault={dragOverHandler}>
-                    <div class="u-flex u-main-center u-cross-center u-gap-32">
-                        <div class="avatar is-size-large">
-                            <span class="icon-upload" aria-hidden="true" />
-                        </div>
-                        <div class="u-grid u-gap-16">
-                            <p>Drag and drop files here to upload</p>
-                            <div>
-                                <Button secondary on:click={() => input.click()}>
-                                    <span class="icon-upload" aria-hidden="true" />
-                                    <span class="text">Choose File</span>
-                                </Button>
-                                {#if files?.length}
-                                    {files.item(0).name}
-                                    <button
-                                        on:click={() => (files = null)}
-                                        type="button"
-                                        class="x-button"
-                                        aria-label="remove file"
-                                        title="Remove file">
-                                        <span class="icon-x" aria-hidden="true" />
-                                    </button>
-                                {/if}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
+                <InputFile bind:files />
                 <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
             </div>