the data is working properly

Author: ft4bhi

drizzle.config.ts

@@ -2,15 +2,16 @@ import type { Config } from "drizzle-kit";
 import * as dotenv from "dotenv";
 import { resolve } from "path";
 
-// 🔥 Explicitly load .env.local
+// Load your env file explicitly
 dotenv.config({ path: resolve(__dirname, ".env.local") });
 
 export default {
-  schema: "./src/lib/db/schema.ts",        // adjust if you use a different path
+  schema: "./src/lib/db/schema.ts",
   out: "./drizzle/migrations",
-  dialect: "postgresql",
+  dialect: "postgresql", // 👈 REQUIRED and must be a literal
   dbCredentials: {
-    url: process.env.DATABASE_URL!,
+    url: process.env.DATABASE_URL!, // 👈 Make sure this exists
   },
   strict: true,
+  schemaFilter: ["public"], // optional, just to scope schema
 } satisfies Config;

…migrations/0000_puzzling_sally_floyd.sql …rations/0000_ordinary_doctor_faustus.sqldrizzle/migrations/0000_puzzling_sally_floyd.sql renamed to drizzle/migrations/0000_ordinary_doctor_faustus.sql drizzle/migrations/0000_puzzling_sally_floyd.sql renamed to drizzle/migrations/0000_ordinary_doctor_faustus.sql

@@ -6,7 +6,7 @@ CREATE TABLE "events" (
 	"venue" varchar(255) NOT NULL,
 	"date" timestamp NOT NULL,
 	"time" varchar(50),
-	"image" varchar(500) NOT NULL,
+	"image" "bytea",
 	"created_at" timestamp DEFAULT now() NOT NULL,
 	"updated_at" timestamp DEFAULT now() NOT NULL,
 	CONSTRAINT "events_slug_unique" UNIQUE("slug")

drizzle/migrations/meta/0000_snapshot.json

@@ -1,5 +1,5 @@
 {
-  "id": "a0ee70f6-983a-423a-b947-b21e3ef07c49",
+  "id": "4518ee12-206e-490c-ade5-179ba41f07e6",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "7",
   "dialect": "postgresql",
@@ -53,9 +53,9 @@
         },
         "image": {
           "name": "image",
-          "type": "varchar(500)",
+          "type": "bytea",
           "primaryKey": false,
-          "notNull": true
+          "notNull": false
         },
         "created_at": {
           "name": "created_at",

drizzle/migrations/meta/_journal.json

@@ -5,8 +5,8 @@
     {
       "idx": 0,
       "version": "7",
-      "when": 1756925082563,
-      "tag": "0000_puzzling_sally_floyd",
+      "when": 1758033961329,
+      "tag": "0000_ordinary_doctor_faustus",
       "breakpoints": true
     }
   ]

package-lock.json

@@ -23,6 +23,7 @@
     "Docker-run": "docker run -p 3000:3000 nextjs_tempalate"
   },
   "dependencies": {
+    "@neondatabase/serverless": "^1.0.1",
     "date-fns": "^4.1.0",
     "dotenv": "^17.2.2",
     "drizzle-kit": "^0.31.4",

package.json

@@ -1,6 +1,5 @@
 import { db } from "@/lib/db";
 import { events } from "@/lib/db/schema";
-import { eq } from "drizzle-orm";
 import { NextResponse } from "next/server";
 
 export async function GET() {
@@ -9,8 +8,37 @@ export async function GET() {
 }
 
 export async function POST(req: Request) {
-  const data = await req.json();
-  const slug = data.title.toLowerCase().replace(/\s+/g, "-");
-  const created = await db.insert(events).values({ ...data, slug }).returning();
+  const formData = await req.formData();
+
+  const title = formData.get("title") as string;
+  const description = formData.get("description") as string;
+  const venue = formData.get("venue") as string;
+  const date = formData.get("date") as string;
+  const time = formData.get("time") as string | null;
+
+  // image may or may not exist
+  const imageFile = formData.get("image") as File | null;
+  let imageBuffer: Buffer | null = null;
+
+  if (imageFile) {
+    const arrayBuffer = await imageFile.arrayBuffer();
+    imageBuffer = Buffer.from(arrayBuffer);
+  }
+
+  const slug = title.toLowerCase().replace(/\s+/g, "-");
+
+  const created = await db
+    .insert(events)
+    .values({
+      slug,
+      title,
+      description,
+      venue,
+      date: new Date(date), // timestamp
+      time: time ?? null,
+      image: imageBuffer, // store blob
+    })
+    .returning();
+
   return NextResponse.json(created[0], { status: 201 });
 }

src/app/api/events/route.ts

@@ -17,46 +17,40 @@ export default function NewEventPage() {
     venue: "",
     date: new Date(),
     time: "",
-    image: "", // will store uploaded image URL
   });
-  const [uploading, setUploading] = useState(false);
-
-  async function handleImageUpload(file: File) {
-    const data = new FormData();
-    data.append("file", file);
-
-    setUploading(true);
-    const res = await fetch("/api/events/upload", {
-      method: "POST",
-      body: data,
-    });
-    setUploading(false);
-
-    if (!res.ok) throw new Error("Upload failed");
-    const { url } = await res.json();
-    setForm((prev) => ({ ...prev, image: url }));
-  }
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [saving, setSaving] = useState(false);
 
   async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    const formattedDate = form.date.toISOString().split("T")[0];
-
-    await fetch("/api/events", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        title: form.title,
-        description: form.description,
-        venue: form.venue,
-        date: formattedDate,
-        time: form.time,
-        image: form.image,
-      }),
-    });
-
-    router.push("/events");
+  e.preventDefault();
+  setSaving(true);
+
+  const formattedDate = form.date?.toISOString().split("T")[0] ?? "";
+
+  const data = new FormData();
+
+  // append normal fields safely
+  data.append("title", form.title ?? "");
+  data.append("description", form.description ?? "");
+  data.append("venue", form.venue ?? "");
+  data.append("date", formattedDate);
+  data.append("time", form.time ?? "");
+
+  // append file only if selected
+  if (imageFile) {
+    data.append("image", imageFile);
   }
 
+  await fetch("/api/events", {
+    method: "POST",
+    body: data,
+  });
+
+  setSaving(false);
+  router.push("/events");
+}
+
+
   return (
     <form onSubmit={handleSubmit} className="max-w-lg mx-auto p-6 space-y-4">
       <h1 className="text-2xl font-bold">Add New Event</h1>
@@ -108,25 +102,22 @@ export default function NewEventPage() {
         />
       </div>
 
-      {/* Image Upload */}
+      {/* Image (optional) */}
       <div>
-        <label className="block mb-1 font-medium">Image</label>
+        <label className="block mb-1 font-medium">Image (optional)</label>
         <input
           type="file"
           accept="image/*"
-          onChange={(e) => e.target.files?.[0] && handleImageUpload(e.target.files[0])}
+          onChange={(e) => setImageFile(e.target.files?.[0] || null)}
         />
-        {uploading && <p className="text-sm text-gray-500">Uploading...</p>}
-        {form.image && (
-          <img src={form.image} alt="Uploaded" className="mt-2 w-32 h-32 object-cover rounded" />
-        )}
       </div>
 
       <button
         type="submit"
+        disabled={saving}
         className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800"
       >
-        Save
+        {saving ? "Saving..." : "Save"}
       </button>
     </form>
   );

src/app/events/new/page.tsx

@@ -1,6 +1,6 @@
 @import "tailwindcss";
 
-:root {
+/* :root {
   --background: #ffffff;
   --foreground: #171717;
 }
@@ -23,4 +23,4 @@ body {
   background: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
-}
+} */

src/app/globals.css

@@ -1,4 +1,12 @@
-import { pgTable, text, varchar, timestamp, uuid } from "drizzle-orm/pg-core";
+// src/lib/db/schema.ts
+import { pgTable, text, varchar, timestamp, uuid, customType } from "drizzle-orm/pg-core";
+
+// define bytea type manually
+const bytea = customType<{ data: Buffer; driverData: Buffer }>({
+  dataType() {
+    return "bytea";
+  },
+});
 
 export const events = pgTable("events", {
   id: uuid("id").defaultRandom().primaryKey(),
@@ -8,7 +16,7 @@ export const events = pgTable("events", {
   venue: varchar("venue", { length: 255 }).notNull(),
   date: timestamp("date", { mode: "date" }).notNull(),
   time: varchar("time", { length: 50 }),
-  image: varchar("image", { length: 500 }).notNull(),
+  image: bytea("image"), // ✅ now works
   createdAt: timestamp("created_at").defaultNow().notNull(),
   updatedAt: timestamp("updated_at").defaultNow().notNull(),
 });