diff --git a/app/api/uploadthing/core.ts b/app/api/uploadthing/core.ts
new file mode 100644
index 0000000..f4a0b08
--- /dev/null
+++ b/app/api/uploadthing/core.ts
@@ -0,0 +1,21 @@
+import { auth } from "@clerk/nextjs";
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+
+const f = createUploadthing();
+
+const handleAuth = () => {
+ const { userId } = auth();
+ if (!userId) throw new Error("Unauthorized");
+ return { userId: userId };
+}
+
+export const ourFileRouter = {
+ serverImage: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
+ .middleware(() => handleAuth())
+ .onUploadComplete(() => {}),
+ messageFile: f(["image", "pdf"])
+ .middleware(() => handleAuth())
+ .onUploadComplete(() => {})
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;
\ No newline at end of file
diff --git a/app/api/uploadthing/route.ts b/app/api/uploadthing/route.ts
new file mode 100644
index 0000000..43ca1cd
--- /dev/null
+++ b/app/api/uploadthing/route.ts
@@ -0,0 +1,8 @@
+import { createNextRouteHandler } from "uploadthing/next";
+
+import { ourFileRouter } from "./core";
+
+// Export routes for Next App Router
+export const { GET, POST } = createNextRouteHandler({
+ router: ourFileRouter,
+});
\ No newline at end of file
diff --git a/components/file-upload.tsx b/components/file-upload.tsx
new file mode 100644
index 0000000..70dbf3a
--- /dev/null
+++ b/components/file-upload.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { X } from "lucide-react";
+import Image from "next/image";
+
+import { UploadDropzone } from "@/lib/uploadthing";
+
+import "@uploadthing/react/styles.css";
+
+interface FileUploadProps {
+ onChange: (url?: string) => void;
+ value: string;
+ endpoint: "messageFile" | "serverImage";
+ }
+
+export const FileUpload = ({
+ onChange,
+ value,
+ endpoint,
+}: FileUploadProps) => {
+ const fileType = value?.split(".").pop();
+
+ if (value && fileType !== "pdf") {
+ return (
+
+
+
+
+ )
+ }
+
+ return (
+ {
+ onChange(res?.[0].url);
+ }}
+ onUploadError={(error: Error) => {
+ console.error(error);
+ }}
+ />
+ )
+}
\ No newline at end of file
diff --git a/components/modals/initial-model.tsx b/components/modals/initial-modal.tsx
similarity index 81%
rename from components/modals/initial-model.tsx
rename to components/modals/initial-modal.tsx
index 50370c1..b8ba77d 100644
--- a/components/modals/initial-model.tsx
+++ b/components/modals/initial-modal.tsx
@@ -3,6 +3,7 @@
import * as z from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
import {
Dialog,
@@ -22,7 +23,7 @@ import{
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
-import { useEffect, useState } from "react";
+import { FileUpload } from "@/components/file-upload";
const formSchema = z.object({
name: z.string().min(1, {
@@ -57,7 +58,7 @@ export const InitialModel = () => {
if (!isMounted) {
return null;
}
-
+
return (