working file upload

.gitignore

@@ -39,4 +39,7 @@ yarn-error.log*
 **/*.tgz
 **/*.log
 package-lock.json
-**/*.bun
+**/*.bun
+/src/uploads
+/uploads
+/mydb.sqlite

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"

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}`,
 );

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>

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));
+};