From a0885013bbc91bf61c4a635de8a784ed545d487b Mon Sep 17 00:00:00 2001
From: C4illin <emrik.ostling@gmail.com>
Date: Fri, 17 May 2024 19:23:05 +0200
Subject: [PATCH] working file upload

---
 .gitignore           |   5 ++++-
 bun.lockb            | Bin 15389 -> 15742 bytes
 package.json         |   3 ++-
 src/index.ts         |  42 +++++++++++++++++++++++++++++++++---------
 src/pages/index.html |   7 ++++---
 src/public/index.js  |  24 +++++++++++++++++++++++-
 6 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 87e5610..bc34871 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,4 +39,7 @@ yarn-error.log*
 **/*.tgz
 **/*.log
 package-lock.json
-**/*.bun
\ No newline at end of file
+**/*.bun
+/src/uploads
+/uploads
+/mydb.sqlite
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index bd8f292c040cb6e3f9ffac9766146c4a9285136e..501b456b8636c0ea43bac9badc697ad1db853932 100644
GIT binary patch
delta 2881
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
Q$JRwoSO2b)1r>3B04b~p&;S4c

delta 2681
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

diff --git a/package.json b/package.json
index ec10e89..f573fa1 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
   "dependencies": {
     "@elysiajs/html": "^1.0.2",
     "@elysiajs/static": "^1.0.2",
-    "elysia": "latest"
+    "elysia": "latest",
+    "nanoid": "^5.0.7"
   },
   "devDependencies": {
     "bun-types": "latest"
diff --git a/src/index.ts b/src/index.ts
index 6fba87e..ca7096d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,15 +1,39 @@
 import { Elysia } from "elysia";
-import { staticPlugin } from '@elysiajs/static'
-import { html } from '@elysiajs/html'
+import { staticPlugin } from "@elysiajs/static";
+import { html } from "@elysiajs/html";
+import { Database } from "bun:sqlite";
+
+const db = new Database("./mydb.sqlite");
+const baseDir = import.meta.dir;
+const uploadsDir = "./uploads/";
 
 const app = new Elysia()
-  .use(html())
-  .use(staticPlugin({
-    assets: "src/public/", prefix: "/"
-  }))
-  .get("/", () => Bun.file("src/pages/index.html"))
-  .listen(3000);
+	.use(html())
+	.use(
+		staticPlugin({
+			assets: "src/public/",
+			prefix: "/",
+		}),
+	)
+	.get("/", () => Bun.file("src/pages/index.html"))
+	.post("/upload", async (ctx) => {
+		console.log(ctx.body);
+		if (ctx.body?.file) {
+			await Bun.write(`${uploadsDir}${ctx.body.file.name}`, ctx.body.file);
+		} else if (ctx.body?.files) {
+			if (Array.isArray(ctx.body.files)) {
+				console.log("Found array of files");
+				for (const file of ctx.body.files) {
+					console.log(file);
+					await Bun.write(`${uploadsDir}${file.name}`, file);
+				}
+			} else {
+				await Bun.write(`${uploadsDir}${ctx.body.files.name}`, ctx.body.files);
+			}
+		}
+	})
+	.listen(3000);
 
 console.log(
-  `🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}`
+	`🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}`,
 );
diff --git a/src/pages/index.html b/src/pages/index.html
index f7e3c7e..de49eb3 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -27,13 +27,13 @@
   <main class="container-fluid">
 
     <!-- File upload -->
-    <form method="post" enctype="multipart/form-data">
+    <form method="post" action="upload" enctype="multipart/form-data">
       <div>
         <article>
           <table id="file-list">
           </table>
           <input type="file" name="file" multiple />
-          
+
         </article>
         <!-- <div class="icon">></div> -->
         <article>
@@ -48,7 +48,8 @@
         </article>
       </div>
       <div class="center">
-        <button type="submit">Convert</button>
+        <input type="submit" value="Convert">
+        <!-- <button type="submit">Convert</button> -->
       </div>
     </form>
   </main>
diff --git a/src/public/index.js b/src/public/index.js
index 218563c..3d758b5 100644
--- a/src/public/index.js
+++ b/src/public/index.js
@@ -1,9 +1,11 @@
 // Select the file input element
 const fileInput = document.querySelector('input[type="file"]');
 
+let filesToUpload = [];
+
 // Add a 'change' event listener to the file input element
 fileInput.addEventListener("change", (e) => {
-  console.log(e.target.files);
+	console.log(e.target.files);
 	// Get the selected files from the event target
 	const files = e.target.files;
 
@@ -23,4 +25,24 @@ fileInput.addEventListener("change", (e) => {
 		// Append the row to the file-list table
 		fileList.appendChild(row);
 	}
+
+	uploadFiles(files);
 });
+
+const uploadFiles = (files) => {
+	const formData = new FormData();
+
+	for (let i = 0; i < files.length; i++) {
+		formData.append("files", files[i], files[i].name);
+	}
+
+	fetch("/upload", {
+		method: "POST",
+		body: formData,
+	})
+		.then((res) => res.json())
+		.then((data) => {
+			console.log(data);
+		})
+		.catch((err) => console.log(err));
+};