file uploader

2023-10-05 10:27:52 -06:00
parent 6e582e11dc
commit 5779cd9efc
17 changed files with 847 additions and 37 deletions
--- a/routes/_app.tsx
+++ b/routes/_app.tsx
@@ -21,7 +21,7 @@ export default function App({ Component }: AppProps) {
        >
        </link>
        <link rel="stylesheet" href="/styles/tailwind.css" />
-      </head>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossOrigin="anonymous" referrerpolicy="no-referrer" />      </head>
      <body>
        <div class="flex h-[100vh]">
          <div class="relative h-full min-w-[400px] bg-licorice overflow-y-auto border-r-2 p-4 dark:border-sky-950 border-sky text-white flex flex-col">
--- a/routes/mods/index.tsx
+++ b/routes/mods/index.tsx
@@ -0,0 +1,61 @@
+import { FunctionComponent } from "preact";
+import { Content } from "../../components/Content.tsx";
+import { SERVER_STATE } from "../../state/serverState.ts";
+import { FileUploader } from "../../islands/fileUploader.tsx";
+
+export default async function ModsFolder() {
+  const files: string[] = [];
+  if (
+    SERVER_STATE.serverType !== "unset" && SERVER_STATE.serverType !== "vanilla"
+  ) {
+    for await (const fileEntry of Deno.readDir("./server/mods")) {
+      if (fileEntry.isFile) {
+        files.push(fileEntry.name);
+      }
+    }
+  }
+
+  return (
+    <div className="container p-8">
+      <Content>
+        <h2 class="font-pixel text-xl">Active Mods</h2>
+        <FileUploader path="./server/mods">
+          <div className="relative grid lg:grid-cols-3 min-h-[100px]">
+            {!files.length && (
+              <div class="absolute place-self-center">Drop files here to upload</div>
+            )}
+            {files.map((f) => (
+              <div class="flex gap-2 items-center">
+                <FileIcon fileName={f} />
+                {f}
+              </div>
+            ))}
+          </div>
+        </FileUploader>
+      </Content>
+    </div>
+  );
+}
+
+const FileIcon: FunctionComponent<{ fileName: string }> = ({ fileName }) => {
+  let icon;
+  switch (fileName.split(".")[1]) {
+    case "jar":
+      icon = "fa-brand fa-java";
+      break;
+    case "tmp":
+    case "temp":
+      icon = "fas fa-ghost";
+      break;
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "webp":
+      icon = "fas fa-image";
+      break;
+    default:
+      icon = "fas fa-file";
+  }
+
+  return <i class={icon}></i>;
+};
--- a/routes/upload.ts
+++ b/routes/upload.ts
@@ -0,0 +1,21 @@
+import { Handlers } from "$fresh/server.ts";
+import { ensureFile } from "$std/fs/ensure_file.ts";
+
+export const handler: Handlers = {
+  async POST(req, _ctx) {
+    const path = req.headers.get("x-grizz-path");
+    if (!path) return new Response("Upload path not included", { status: 400 });
+
+    const files = Array.from((await req.formData()).values()) as File[];
+
+    for (const file of files) {
+      const filePath = path.replace(/.$/, (e) => e.replace("/", "") + "/") +
+        file.name;
+      await ensureFile(filePath);
+      const newFile = await Deno.open(filePath, { write: true });
+      file.stream().pipeTo(newFile.writable);
+    }
+
+    return new Response("Success");
+  },
+};