feat: implement file upload and fetching

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

.prettierrc

@@ -1,5 +1,6 @@
 {
-	"useTabs": true,
+	"useTabs": false,
+    "tabWidth": 2,
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,

src/lib/pocketbase.ts

@@ -0,0 +1,5 @@
+import Pocketbase from 'pocketbase';
+import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
+
+const client = new Pocketbase(PUBLIC_POCKETBASE_URL)
+export default client;

src/routes/+page.server.ts

@@ -0,0 +1,6 @@
+export const actions = {
+  default: async (event) => {
+    // upload file
+    console.log(event);
+  }
+};

src/routes/+page.svelte

@@ -1,2 +1,61 @@
-<h1>Welcome to SvelteKit</h1>
+<script lang="ts">
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+    import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
+    
+  let file;
+  let form;
+  let percent = 0;
+
+  let completeMessage: string | undefined
+  
+  const handleFileChange = (event: Event & { currentTarget: HTMLInputElement }) => {
+    const target = event.target as unknown as { files: File[] }
+    const file = target.files[0]
+
+    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}`
+        }
+    }
+
+    xhr.open('POST', `${PUBLIC_POCKETBASE_URL}/api/collections/uploads/records`)
+    xhr.send(formData)
+  }
+</script>
+
+<main class="flex flex-col items-center">
+  <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>
+      {/if}
+    </label>
+  </form>
+</main>

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

@@ -0,0 +1,21 @@
+import { json, redirect } from '@sveltejs/kit';
+import Pocketbase from 'pocketbase';
+import { PUBLIC_POCKETBASE_URL } from '$env/static/public';
+
+export async function GET({ params: { slug } }) {
+  let fileUrl = null;
+  try {
+    const pocketbase = new Pocketbase(PUBLIC_POCKETBASE_URL);
+    const record = await pocketbase.collection('uploads').getOne(slug);
+    fileUrl = new URL(
+      `${PUBLIC_POCKETBASE_URL}/api/files/${record.collectionId}/${record.id}/${record.file}`
+    );
+  } catch (error) {
+    console.error(error);
+    return redirect(307, '/404');
+  }
+
+  if (fileUrl) {
+    redirect(301, fileUrl);
+  }
+}