chore: update inputFile css

package-lock.json

@@ -9,7 +9,7 @@
             "version": "0.0.1",
             "dependencies": {
                 "@analytics/google-analytics": "^1.0.5",
-                "@appwrite.io/pink": "^0.0.3",
+                "@appwrite.io/pink": "^0.0.4",
                 "@aw-labs/appwrite-console": "^13.1.0",
                 "@popperjs/core": "^2.11.6",
                 "@sentry/svelte": "^7.36.0",
@@ -146,9 +146,9 @@
             "integrity": "sha512-1Yw7u/COtxx06BfwlI+kVhsa/upKYzmCNrT4c8QDeCY2KMYlnijkUjtHiPU08HxyTIVB5j6d75O0YWVIHwQS8g=="
         },
         "node_modules/@appwrite.io/pink": {
-            "version": "0.0.3",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.3.tgz",
-            "integrity": "sha512-hxLMLvtUGkurnKcdwRH36GyeNZelOPSl5qrniwWwGQbpO+S8SakjMNqL1AF/+4JnypfNZUzJNRGTo+VGbrwang==",
+            "version": "0.0.4",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.0.4.tgz",
+            "integrity": "sha512-pCXxBqSikG5PpBb2y84tTRH6cAMUYbROlQN8LuGoY2J+vTWMT+HQ7+RAAwRWU1Dlle4FgOFFCKmqU95g6X2a6g==",
             "dependencies": {
                 "@appwrite.io/pink-icons": "*",
                 "normalize.css": "^8.0.1",

package.json

@@ -20,7 +20,7 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/pink": "^0.0.3",
+        "@appwrite.io/pink": "^0.0.4",
         "@aw-labs/appwrite-console": "^13.1.0",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.36.0",

src/lib/elements/forms/inputFile.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Trim } from '$lib/components';
-    import { Button } from '.';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
 
     export let label: string = null;
     export let files: FileList;
     export let list = new DataTransfer();
     export let allowedFileExtensions: string[] = [];
+    export let maxSize: number = null;
 
     let input: HTMLInputElement;
     let hovering = false;
@@ -13,9 +14,7 @@
     function dropHandler(ev: DragEvent) {
         hovering = false;
         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());
@@ -28,6 +27,8 @@
     function dragOverHandler() {
         hovering = true;
     }
+
+    $: fileArray = files?.length ? Array.from(files) : [];
 </script>
 
 <input
@@ -42,42 +43,75 @@
         <p class="text">{label}</p>
     {/if}
     <div
-        class="card is-border-dashed is-no-shadow"
+        class="box is-border-dashed is-no-shadow u-padding-24"
+        style="--box-border-radius:var(--border-radius-xsmall); z-index: 1"
         class:is-hover-with-file={hovering}
         on:drop|preventDefault={dropHandler}
-        on:dragover|preventDefault={dragOverHandler}
+        on:dragover|preventDefault|stopPropagation={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 u-min-width-0">
-                <span class="icon-folder" aria-hidden="true" />
+        <div class="upload-file-box">
+            <div class="upload-file-box-image">
+                <span class="icon-upload" aria-hidden="true" />
+            </div>
+            <div class="u-min-width-0 u-text-center">
+                <h5 class="upload-file-box-title heading-level-7 u-inline">
+                    <span class="is-only-desktop">Drag and drop files here to upload</span>
+                    <span class="is-not-desktop">Upload a File</span>
+                </h5>
+                {#if allowedFileExtensions?.length}
+                    <button
+                        class="tooltip u-inline u-margin-inline-start-4"
+                        aria-label="variables info">
+                        <span class="icon-info" aria-hidden="true" />
+                        <span class="tooltip-popup" role="tooltip"
+                            >Only {allowedFileExtensions.join(', ')} accepted.</span>
+                    </button>
+                {/if}
+            </div>
+            <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
+                {#if maxSize}
+                    {@const readableMaxSize = humanFileSize(maxSize)}
+                    <p class="upload-file-box-info body-text-2 u-normal">
+                        Max file size: {readableMaxSize.value + readableMaxSize.unit}
+                    </p>
+                {/if}
+                <button
+                    class="button is-secondary is-full-width-mobile"
+                    type="button"
+                    on:click={() => input.click()}>
+                    <span class="text">Choose a file</span>
+                </button>
             </div>
-            <div class="u-grid u-gap-16 u-min-width-0">
-                <p>Drag and drop files here</p>
-                <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}
-                        {@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>
+            {#if files?.length}
+                <ul class="upload-file-box-list u-min-width-0">
+                    {#each fileArray as file}
+                        {@const fileName = file.name.split('.')}
+                        {@const fileSize = humanFileSize(file.size)}
+                        <li class="u-flex u-cross-center u-min-width-0">
+                            <span class="icon-document" aria-hidden="true" />
+                            <span class="upload-file-box-name u-trim u-min-width-0">
+                                <Trim>{fileName[0]}</Trim>
+                            </span>
+                            <span class="upload-file-box-name u-min-width-0 u-flex-shrink-0">
+                                .{fileName[1]}
+                            </span>
+                            <span
+                                class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">
+                                {fileSize.value + fileSize.unit}
+                            </span>
                             <button
                                 on:click={() => (files = null)}
                                 type="button"
-                                class="button is-text is-only-icon"
-                                style="--button-size:1.5rem;"
+                                class="button is-text is-only-icon u-margin-inline-start-auto"
                                 aria-label="remove file"
-                                title="Remove file">
+                                style="--button-size:1.5rem;">
                                 <span class="icon-x" aria-hidden="true" />
                             </button>
-                        </div>
-                    {/if}
-                </div>
-            </div>
+                        </li>
+                    {/each}
+                </ul>
+            {/if}
         </div>
     </div>
 </div>

src/lib/layout/header.svelte

@@ -93,7 +93,7 @@
             <span class="text">Support</span>
         </a>
     </nav>
-    <nav class="u-flex u-height-100-percents u-sep-inline-start">
+    <nav class="u-flex u-height-100-percent u-sep-inline-start">
         {#if $user}
             <div class="drop-wrapper" class:is-open={showDropdown} bind:this={droplistElement}>
                 <button class="user-profile-button" on:click={() => (showDropdown = !showDropdown)}>

src/lib/layout/unauthenticated.svelte

@@ -67,7 +67,7 @@
         <div class="u-margin-block-start-40" />
     </section>
     <section class="grid-1-1-col-2 u-flex u-main-center u-cross-center">
-        <div class="container u-flex u-flex-vertical u-cross-center u-height-100-percents">
+        <div class="container u-flex u-flex-vertical u-cross-center u-height-100-percent">
             <div class="u-margin-block-start-auto" />
 
             <div class="u-max-width-500 u-width-full-line">

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

@@ -6,7 +6,6 @@
     import { page } from '$app/stores';
     import { uploader } from '$lib/stores/uploader';
     import { bucket } from './store';
-    import { calculateSize } from '$lib/helpers/sizeConvertion';
     import { Permissions } from '$lib/components/permissions';
     import { addNotification } from '$lib/stores/notifications';
     import { trackEvent } from '$lib/actions/analytics';
@@ -50,8 +49,10 @@
     <svelte:fragment slot="header">Create File</svelte:fragment>
     <FormList>
         <div>
-            <InputFile bind:files allowedFileExtensions={$bucket.allowedFileExtensions} />
-            <p>Max file size: {calculateSize($bucket.maximumFileSize)}</p>
+            <InputFile
+                bind:files
+                allowedFileExtensions={$bucket.allowedFileExtensions}
+                maxSize={$bucket.maximumFileSize} />
         </div>
 
         {#if !showCustomId}