Pasted image now uploading correctly.

.ncurc.json

@@ -0,0 +1,3 @@
+{
+    "reject": ["eslint"]
+  }

package.json

@@ -16,7 +16,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@auth/drizzle-adapter": "^1.5.2",
+    "@auth/drizzle-adapter": "^1.5.3",
     "@headlessui/react": "^2.1.8",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
@@ -88,7 +88,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-icons": "^5.3.0",
-    "react-resizable-panels": "^2.1.3",
+    "react-resizable-panels": "^2.1.4",
     "react-responsive-masonry": "^2.3.0",
     "recharts": "^2.12.7",
     "server-only": "^0.0.1",
@@ -106,8 +106,8 @@
     "@types/bun": "latest",
     "@types/eslint": "^9.6.1",
     "@types/jest": "^29.5.13",
-    "@types/node": "^22.7.3",
-    "@types/react": "^18.3.9",
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",

src/app/(site)/(app)/upload/page.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 
 import UploadPage from "@/components/pages/upload-page";
 import { ClipboardContext } from "@/lib/clipboard/clipboard-context";
-import { usePathname, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import GenericError from "@/components/errors/generic-error";
 import Loading from "@/components/widgets/loading";
 
@@ -31,7 +31,7 @@ const Upload = () => {
       (c === "1" && clipboardContext?.file != null && !loading) ||
       c !== "1"
     ) {
-      return <UploadPage file={clipboardContext?.file ?? undefined} />;
+      return <UploadPage pastedImage={clipboardContext?.file ?? undefined} />;
     }
     if (c === "1" && loading) {
       return <Loading />;

src/components/pages/upload-page.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { SubmitHandler, Controller } from "react-hook-form";
+import { type SubmitHandler, Controller } from "react-hook-form";
 import { useRouter } from "next/navigation";
 import ImageUpload from "@/components/widgets/image-upload";
 import TaggedInput from "@/components/widgets/tagged-input";
@@ -27,37 +27,25 @@ type FormValues = {
 };
 
 type UploadPageProps = {
-  file?: File;
+  pastedImage?: File;
 };
-const UploadPage: React.FC<UploadPageProps> = ({ file }) => {
+const UploadPage: React.FC<UploadPageProps> = ({ pastedImage }) => {
   const utils = api.useUtils();
+  const router = useRouter();
+
   const form = useForm<FormValues>({
     defaultValues: {
       title: env.NEXT_PUBLIC_DEBUG_MODE ? "This is my title" : "",
       description: env.NEXT_PUBLIC_DEBUG_MODE ? "This is my description" : "",
       tags: [],
-      image: undefined,
     },
   });
-  if (file) {
-    logger.log("upload-page", "We gotta file", file);
+  if (pastedImage) {
+    logger.log("upload-page", "We gotta file", pastedImage);
   } else {
     logger.log("upload-page", "No file");
   }
-  // const imageSchema = z.object({
-  //   image: z
-  //     .any()
-  //     .refine((file) => {
-  //       if (file.size === 0 || file.name === undefined) return false;
-  //       else return true;
-  //     }, "Please update or add new image.")
 
-  //     .refine(
-  //       (file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),
-  //       ".jpg, .jpeg, .png and .webp files are accepted.",
-  //     )
-  //     .refine((file) => file.size <= MAX_FILE_SIZE, `Max file size is 5MB.`),
-  // });
   const createImage = api.post.create.useMutation({
     onSuccess: async (e) => {
       console.log("upload-page", "onSuccess", e);
@@ -69,7 +57,7 @@ const UploadPage: React.FC<UploadPageProps> = ({ file }) => {
           method: "POST",
           body,
         });
-        if (response.status === StatusCodes.CREATED) {
+        if ((response.status as StatusCodes) === StatusCodes.CREATED) {
           await utils.post.invalidate();
           router.replace("/");
         }
@@ -89,17 +77,6 @@ const UploadPage: React.FC<UploadPageProps> = ({ file }) => {
     } catch (error) {
       logger.error("UploadPage", "error", error);
     }
-    // if (data.image) {
-    //   const body = new FormData();
-    //   body.append("file", data.image);
-    //   const response = await fetch("api/upload", {
-    //     method: "POST",
-    //     body,
-    //   });
-    //   if (response.status === 201) {
-    //     router.replace("/");
-    //   }
-    // }
   };
   return (
     <div className="md:grid md:grid-cols-3 md:gap-6">
@@ -139,7 +116,11 @@ const UploadPage: React.FC<UploadPageProps> = ({ file }) => {
                 control={form.control}
                 name="image"
                 render={({ field: { value, onChange } }) => (
-                  <ImageUpload value={value} onChange={onChange} />
+                  <ImageUpload
+                    value={value}
+                    onChange={onChange}
+                    pastedImage={pastedImage}
+                  />
                 )}
               />
               <FormField

src/components/widgets/image-upload.tsx

@@ -4,18 +4,35 @@ import React from "react";
 import { Icons } from "../icons";
 interface IImageUploadProps {
   value: string | undefined;
+  pastedImage: File | undefined;
   onChange: (image: File) => void;
 }
-const ImageUpload: React.FC<IImageUploadProps> = ({ onChange }) => {
-  const [image, setImage] = React.useState<string>();
+const ImageUpload: React.FC<IImageUploadProps> = ({
+  pastedImage,
+  onChange,
+}) => {
+  const [image, setImage] = React.useState<string | undefined>(
+    pastedImage && URL.createObjectURL(pastedImage),
+  );
+
   const onImageChange = ($event: React.ChangeEvent<HTMLInputElement>) => {
-    console.log("ImageUpload", "onImageChange", $event);
     if ($event.target.files?.[0]) {
-      const url = URL.createObjectURL($event.target.files[0]);
-      setImage(url);
-      onChange($event.target.files[0]);
+      handleNewImage($event.target.files[0]);
     }
   };
+
+  const handleNewImage = (imageFile: File) => {
+    const url = URL.createObjectURL(imageFile);
+    setImage(url);
+    onChange(imageFile);
+  };
+
+  React.useEffect(() => {
+    if (pastedImage) {
+      handleNewImage(pastedImage);
+    }
+  }, []);
+
   return (
     <div className="mt-1 flex justify-center rounded-md border-2 border-dashed border-secondary px-6 pb-6 pt-5">
       {image ? (
@@ -41,7 +58,7 @@ const ImageUpload: React.FC<IImageUploadProps> = ({ onChange }) => {
             >
               <span>Upload a file</span>
               <input
-                accept="image/gif,video/mp4,video/mov,video/quicktime,video/webm,youtube,vimeo"
+                accept="image/gif,image/jpg,image/jpeg,image/png,video/mp4,video/mov,video/quicktime,video/webm,youtube,vimeo"
                 id="gif-upload"
                 type="file"
                 className="sr-only"

src/server/api/routers/post.ts

@@ -5,10 +5,9 @@ import {
 } from "@/server/api/trpc";
 import { slugifyWithCounter } from "@sindresorhus/slugify";
 import { z } from "zod";
-import { posts, users, votes } from "@/server/db/schema";
-import { env } from "@/env";
+import { posts, votes } from "@/server/db/schema";
 import { and, eq, sql } from "drizzle-orm";
-import { Post } from "@/lib/models/post";
+import { type Post } from "@/lib/models/post";
 
 export const postRouter = createTRPCRouter({
   getVoteCount: publicProcedure