feat: polish UI

Signed-off-by: Sphericalkat <me@kat.bio>

src/routes/+page.svelte

@@ -1,61 +1,120 @@
 <script lang="ts">
-    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
-    
-  let file;
-  let form;
+  import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
+  import { filesize } from 'filesize';
+
+  let file: File | undefined = undefined;
   let percent = 0;
+  let isDragging = false;
 
-  let completeMessage: string | undefined
-  
-  const handleFileChange = (event: Event & { currentTarget: HTMLInputElement }) => {
-    const target = event.target as unknown as { files: File[] }
-    const file = target.files[0]
+  let completeURL: string | undefined;
 
-    const formData = new FormData();
-    formData.append('file', file)
-
-    let xhr = new XMLHttpRequest()
-    xhr.upload.onprogress = function(event) {
-        percent = Math.round(100 * event.loaded / event.total);
-        // do something with the percentage
+  const handleFormClick = () => {
+    if (percent > 0) {
+      return;
     }
 
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.accept = '*';
+    input.onchange = (e) => {
+      if (input.files) {
+        file = input.files[0];
+        handleFileChange(file);
+      }
+    };
+    input.click();
+  };
+
+  const handleFileChange = (file: File) => {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    let xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = function (event) {
+      percent = Math.round((100 * event.loaded) / event.total);
+      // do something with the percentage
+    };
+
     xhr.onreadystatechange = (event) => {
-        if (xhr.readyState === 4 && xhr.status < 400) {
-            const response = JSON.parse(xhr.responseText)
-            completeMessage = `Upload complete! Access your file at http://localhost:5173/${response.id}`
-        }
-    }
+      if (xhr.readyState === 4 && xhr.status < 400) {
+        const response = JSON.parse(xhr.responseText);
+        completeURL = `${window.location.origin}/files/${response.id}`;
+      }
+    };
 
-    xhr.open('POST', `${PUBLIC_POCKETBASE_URL}/api/collections/uploads/records`)
-    xhr.send(formData)
-  }
+    xhr.open('POST', `${PUBLIC_POCKETBASE_URL}/api/collections/uploads/records`);
+    xhr.send(formData);
+  };
+
+  const handleDrop = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    e.preventDefault();
+    if (e.dataTransfer?.files) {
+      file = e.dataTransfer.files[0];
+      handleFileChange(file);
+    }
+  };
+
+  const handleDragEnter = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    isDragging = true;
+  };
+
+  const handleDragLeave = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    isDragging = false;
+  };
+
+  const handleDragOver = (
+    e: DragEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    }
+  ) => {
+    e.preventDefault();
+  };
 </script>
 
-<main class="flex flex-col items-center">
+<main class="flex flex-col items-center h-full w-full">
   <h1 class="text-4xl font-bold mt-4">KatStash</h1>
 
   <h2 class="text-2xl font-semibold mt-2">
     Uploads up to 200 MB are allowed. Contact SphericalKat for more details
   </h2>
 
-  {#if completeMessage}
-    <h2 class="text-2xl font-semibold mt-2">Upload complete1</h2>
-  {/if}
-
-  <form bind:this={form} method="POST">
-    <label class="block">
-      <span class="sr-only"></span>
-      <input
-        bind:this={file}
-        on:change={handleFileChange}
-        type="file"
-        id="file"
-        class="file:hidden file:px-4 block w-full h-full text-sm text-slate-500"
-      />
-      {#if percent > 0}
-        <div>{percent}%</div>
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    on:dragenter={handleDragEnter}
+    on:dragleave={handleDragLeave}
+    on:drop={handleDrop}
+    on:dragover={handleDragOver}
+    on:click={handleFormClick}
+    class:border-dashed={percent === 0}
+    class:cursor-pointer={percent === 0 && !completeURL}
+    class="h-48 w-[650px] mt-40 border-2 border-slate-500 rounded-lg flex items-center justify-center cursor-pointer"
+  >
+    <div class="block">
+      {#if percent > 0 && !completeURL}
+        <span class="text-slate-500 px-16">Uploading {percent}%</span>
+      {:else if percent < 100 && !completeURL}
+        <span class="text-slate-500 px-16">Select or drop a file</span>
+      {:else}
+        <div class="text-slate-500 px-16">
+          Upload complete! Access your file at <a class="underline text-blue-500" href={completeURL}
+            >{completeURL}</a
+          >
+        </div>
       {/if}
-    </label>
-  </form>
+    </div>
+  </div>
 </main>

src/routes/files/[slug]/+server.ts

@@ -1,4 +1,4 @@
-import { json, redirect } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
 import Pocketbase from 'pocketbase';
 import { PUBLIC_POCKETBASE_URL } from '$env/static/public';