feat: file upload

app/workspaces/page.tsx

@@ -1,5 +1,6 @@
 import { WorkspaceForm } from "@/components/new-workspace-form";
 import Existing from "@/components/workspace/existing";
+import { FileUpload } from "@/components/workspace/file-upload";
 import { getTemplateNames } from "@/data/template";
 
 export default async function Page() {
@@ -9,6 +10,9 @@ export default async function Page() {
       <div>
         <h1 className="text-2xl mb-2">Create a new workspace</h1>
         <WorkspaceForm templateOptions={templateOptions} />
+        <hr className="my-8" />
+        <h1 className="text-2xl mb-2">Upload files</h1>
+        <FileUpload />
       </div>
       <div className="md:col-span-2">
         <h1 className="text-2xl mb-2">Open an existing workspace</h1>

components/workspace/file-upload.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { db, FileContent } from "@/data/db";
+import { useCallback } from "react";
+import { useDropzone, DropzoneOptions } from "react-dropzone";
+import { kebabCase } from "es-toolkit/string";
+import { useRouter } from "next/navigation";
+
+export function FileUpload() {
+  const router = useRouter();
+  const onDrop = useCallback<NonNullable<DropzoneOptions["onDrop"]>>(
+    async (acceptedFiles) => {
+      let all: FileContent[] = [];
+
+      acceptedFiles.forEach((file) => {
+        const reader = new FileReader();
+
+        reader.onabort = () => console.log("file reading was aborted");
+        reader.onerror = () => console.log("file reading has failed");
+        reader.onload = () => {
+          // Do whatever you want with the file contents
+          const binaryStr = reader.result;
+          if (binaryStr instanceof ArrayBuffer) {
+            const contents = Buffer.from(binaryStr).toString("ascii");
+            // @ts-expect-error
+            const filename = file.path!;
+
+            all.push({ path: filename.slice(1), contents });
+          }
+        };
+        reader.readAsArrayBuffer(file);
+      });
+
+      const input = window.prompt("Enter the workspace name: ");
+
+      if (!!input) {
+        const name = kebabCase(input);
+
+        try {
+          await db.workspaces.add({
+            name,
+            template: "file-upload",
+            dll: "",
+          });
+
+          const templateData: { path: string; contents: string }[] = all;
+
+          await db.files.bulkAdd(
+            templateData.map(({ path, contents }) => ({
+              path: `/workspace/${name}/${path}`,
+              contents,
+            }))
+          );
+          await router.push(`/workspace/${name}`);
+        } catch (err) {
+          alert(String(err));
+        }
+      }
+    },
+    []
+  );
+  const { getRootProps, getInputProps } = useDropzone({ onDrop });
+
+  return (
+    <div {...getRootProps()} className="p-8 border">
+      <input {...getInputProps()} />
+      <p>Drag 'n' drop some files here, or click to select files</p>
+    </div>
+  );
+}

package.json

@@ -41,6 +41,7 @@
     "date-fns": "^3.6.0",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
+    "es-toolkit": "^1.16.0",
     "fflate": "^0.8.2",
     "file-saver": "^2.0.5",
     "inversify": "^6.0.2",
@@ -54,6 +55,7 @@
     "react": "^18",
     "react-accessible-treeview": "^2.9.1",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.52.1",
     "react-icons": "^5.2.1",
     "react-resizable-panels": "^2.0.20",