File upload

src/api/auth.ts

@@ -8,7 +8,7 @@ import * as cookie from "hono/cookie";
 import { ulid } from "ulid";
 import bcrypt from "bcryptjs";
 
-const authSecret: string = process.env.AUTH_SECRET || "secret";
+const authSecret: string = import.meta.env.AUTH_SECRET || "secret";
 
 const loginSchema = z.object({
   email: z.string().email(),

src/api/file.ts

@@ -0,0 +1,56 @@
+import { Hono } from "hono";
+import { rError, rOK } from "./helper";
+import { unflatten } from "flat";
+import { Entry, File, Form } from "@/db/schema";
+import db from "@/lib/db";
+import { eq } from "drizzle-orm";
+import { validator } from "hono/validator";
+import { ulid } from "ulid";
+import query from "../lib/query";
+import { getSession, getTeam } from "@/lib/auth";
+import { handleFormUpload } from "@/components/model";
+
+const form = new Hono()
+  .get(
+    "/get",
+    async (c) => {
+      const team = await getTeam(c.req.raw);
+      if (!team) {
+        return rError(c, "Unauthenticated");
+      }
+      const r = await query.getViewComponentListByTeamId(team);
+      return rOK(c, r);
+    },
+  )
+  .post(
+    "/upload",
+    validator("form", (v) => v),
+    async (c) => {
+
+      const team = await getTeam(c.req.raw);
+      if (!team) {
+        return rError(c, "Unauthenticated");
+      }
+      const values = await handleFormUpload(c, null, team) as any;
+      let id = values.file;
+      if (typeof id !== 'string') {
+        return rError(c, "Emm no shit");
+      }
+      return rOK(c, id);
+    },
+  )
+  .post(
+    "/delete/:id",
+    async (c) => {
+      let id = c.req.param("id");
+      let r = await db
+        .delete(File)
+        .where(eq(File.id, id));
+      if (r[0].affectedRows == 0) {
+        return rError(c, "Emm no shit");
+      }
+      return rOK(c);
+    },
+  )
+
+export default form;

src/api/form.ts

@@ -7,7 +7,7 @@ import { eq } from "drizzle-orm";
 import { validator } from "hono/validator";
 import { ulid } from "ulid";
 import query from "../lib/query";
-import { getTeam } from "@/lib/auth";
+import { getSession, getTeam } from "@/lib/auth";
 import { handleFormUpload } from "@/components/model";
 
 const form = new Hono()
@@ -61,7 +61,7 @@ const form = new Hono()
         return rError(c, "not found");
       }
 
-      const data: any = await handleFormUpload(await c.req.formData(), formId, form.teamId);
+      const data: any = await handleFormUpload(c, formId, form.teamId);
       const id = ulid();
       await db.insert(Entry).values({
         formId,

src/api/router.ts

@@ -5,13 +5,15 @@ import { ZodError } from "zod";
 import { rError, rOK } from "./helper";
 import form from "./form";
 import view from "./view";
+import file from "./file";
 import viewComponent from "./view-component";
 
 const app = new Hono()
   .use(logger())
   .route("/api/auth", auth)
   .route("/api/form", form)
   .route("/api/view", view)
+  .route("/api/file", file)
   .route("/api/view-component", viewComponent)
   .get("/api/health", async (c) => {
     return rOK(c);

src/components/control/File.tsx

@@ -62,6 +62,7 @@ export default function File({ parentID, form, schema }: ControlProps) {
             placeholder={schema.placeholder}
             multiple={schema.multiple}
             name={name}
+            id={name}
             required={!!schema.required}
           />
         </FormItem>

src/components/control/FormControl.tsx

@@ -5,6 +5,7 @@ import formSchema from "../editor/form.ts";
 import viewSchema from "../editor/view.ts";
 import { Button } from "../ui/button.tsx";
 import viewComponentSchema from "../editor/viewComponent.ts";
+import fileSchema from "../editor/file.ts";
 
 export type FormProps = {
   schema: any;
@@ -21,6 +22,10 @@ export function EditorViewControl(props: Omit<FormProps, "schema">) {
   return <FormControl {...props} schema={viewSchema} />;
 }
 
+export function EditorFileControl(props: Omit<FormProps, "schema">) {
+  return <FormControl {...props} schema={fileSchema} />;
+}
+
 export function EditorViewComponentControl(props: Omit<FormProps, "schema">) {
   return <FormControl {...props} schema={viewComponentSchema} />;
 }
@@ -37,7 +42,7 @@ export function FormControl({ schema, onSubmit, disabled, value }: FormProps) {
       <form onSubmit={form.handleSubmit(onSubmit)}>
         <fieldset disabled={disabled}>
           <Control form={form} parentID="" schema={rSchema} />
-          <Button className="my-3">Save</Button>
+          <Button name="formSubmitBtn" className="my-3">Save</Button>
         </fieldset>
       </form>
     </Form>

src/components/editor/file.ts

@@ -0,0 +1,13 @@
+
+
+const fileSchema = {
+  type: 'group',
+  children: [{
+    label: 'File',
+    id: 'file',
+    type: 'file',
+    required: true,
+  },],
+}
+
+export default fileSchema;

src/components/editor/puck.tsx

@@ -68,6 +68,23 @@ const config: Config = {
       components: ['Text', 'Button', 'Card']
     }
   },
+  root: {
+    fields: {
+      title: {
+        type: "text",
+      },
+      description: {
+        type: "textarea",
+      },
+      thumbnail: {
+        type: "external",
+
+      },
+      css: {
+        type: "textarea",
+      },
+    }
+  },
   components: {
     Box: {
       fields: {
@@ -200,7 +217,7 @@ const config: Config = {
 
         return <div style={css}>{dataMock.map((data: any, i: number) => {
           return <React.Fragment key={i}>
-            <DataContext.Provider value={{...oldData, ...data}}>
+            <DataContext.Provider value={{ ...oldData, ...data }}>
               <DropZone zone="children" />
             </DataContext.Provider>
           </React.Fragment>

src/components/helper.ts

@@ -66,4 +66,18 @@ export function cssToStyle(str: string | undefined) {
     obj[_.kebabCase(key)] = value.join(":").trim();
     return obj;
   }, {})
-}
+}
+
+export function formatBytes(bytes: number, precision = 1) {
+  var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'];
+
+  bytes = Math.max(bytes, 0);
+  var pow = Math.floor((bytes ? Math.log(bytes) : 0) / Math.log(1024));
+  pow = Math.min(pow, units.length - 1);
+
+  // Uncomment one of the following alternatives
+  bytes /= Math.pow(1024, pow);
+  // bytes /= (1 << (10 * pow));
+
+  return bytes.toFixed(precision) + ' ' + units[pow];
+}

src/components/model.ts

@@ -1,18 +1,21 @@
-import { Team, File as FileDB } from "@/db/schema";
+import { File as FileDB } from "@/db/schema";
 import db from "@/lib/db";
 import { unflatten } from "flat";
 import path from "node:path";
 import fsp from "node:fs/promises";
 import fs from "node:fs";
 import { ulid } from "ulid";
 import { extractFormData } from "../components/helper";
+import { getApiSession, getSession } from "@/lib/auth";
+import type { Context } from "hono";
 
 export async function handleFormUpload(
-  data: FormData,
-  formId: string,
+  c: Context,
+  formId: string | null,
   teamId: string,
 ) {
-  const entries = extractFormData(data);
+  const entries = extractFormData(await c.req.formData());
+  const authorId = await getApiSession(c)
   for (const entry of Object.keys(entries)) {
     let v = entries[entry];
     if (v instanceof File) {
@@ -31,6 +34,7 @@ export async function handleFormUpload(
 
       await db.insert(FileDB).values({
         formId,
+        authorId,
         path: p,
         size: v.size,
         teamId,

src/db/schema.mysql.ts

@@ -70,13 +70,13 @@ export const ViewComponent = mysqlTable("view_component", {
 
 export const File = mysqlTable("file", {
   id: varchar("id", { length: 26 }).primaryKey(),
-  formId: varchar("form_id", { length: 26 }).references(() => Form.id).notNull(),
-  authorId: varchar("author_id", { length: 26 }).references(() => User.id).notNull(),
+  formId: varchar("form_id", { length: 26 }).references(() => Form.id),
+  authorId: varchar("author_id", { length: 26 }).references(() => User.id),
   teamId: varchar("team_id", { length: 26 }).references(() => Team.id).notNull(),
-  size: int("size"),
-  type: text("type"),
-  name: text("name"),
-  path: text("path"),
+  size: int("size").notNull(),
+  type: text("type").notNull(),
+  name: text("name").notNull(),
+  path: text("path").notNull(),
   created: timestamp("created").defaultNow(),
   modified: timestamp("modified").defaultNow(),
 });

src/lib/auth.ts

@@ -2,7 +2,7 @@ import type { Context } from "hono";
 import * as cookie from "hono/cookie";
 import query from "./query";
 
-const authSecret: string = process.env.AUTH_SECRET || "secret";
+const authSecret: string = import.meta.env.AUTH_SECRET || "secret";
 const authCookieName: string = "uid";
 
 // get session under SSR
@@ -16,18 +16,18 @@ export async function getApiSession(c: Context): Promise<string | null> {
 }
 
 export async function getTeam(req: Request) {
-    try {
-      const session = await getSession(req);
-      if (!session) {
-        return null;
-      }
-      let q = await query.getTeamByUser(session);
-      return q?.id || null;
-    } catch (error) {
-      console.error(error);
+  try {
+    const session = await getSession(req);
+    if (!session) {
       return null;
     }
+    let q = await query.getTeamByUser(session);
+    return q?.id || null;
+  } catch (error) {
+    console.error(error);
+    return null;
   }
+}
 
 export async function setSession(c: Context, id: string) {
   await cookie.setSignedCookie(c, authCookieName, id, authSecret, {

src/lib/db.ts

@@ -3,13 +3,12 @@ import {migrate} from 'drizzle-orm/mysql2/migrator';
 
 import * as schema from '@/db/schema';
 import mysql from 'mysql2/promise';
-
 const mySqlConfig = {
-  host: process.env.DB_HOST || 'localhost',
-  user: process.env.DB_USER || 'root',
-  password: process.env.DB_PASSWORD || '',
-  database: process.env.DB_NAME || 'oneform_db',
-  port: parseInt(process.env.DB_PORT || '3306'),
+  host: import.meta.env.DB_HOST || 'localhost',
+  user: import.meta.env.DB_USER || 'root',
+  password: import.meta.env.DB_PASSWORD || '',
+  database: import.meta.env.DB_NAME || 'oneform_db',
+  port: parseInt(import.meta.env.DB_PORT || '3306'),
 };
 
 const sql = mysql.createPool(mySqlConfig);