build(admin): ➕ added uploadthing

apps/admin/package.json

@@ -21,12 +21,14 @@
 		"@emotion/styled": "^11.11.0",
 		"@hookform/resolvers": "^2.9.11",
 		"@tanstack/react-table": "^8.9.11",
+		"@uploadthing/react": "^5.6.1",
 		"framer-motion": "^6.5.1",
 		"next": "latest",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-hook-form": "^7.45.4",
 		"react-icons": "^4.11.0",
+		"uploadthing": "^5.6.1",
 		"yup": "^0.32.11"
 	},
 	"devDependencies": {

apps/admin/src/pages/_app.tsx

@@ -5,6 +5,7 @@ import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import theme from "@/config/theme";
 import SidebarLayout from "@/components/shared/sidebar";
+import "@uploadthing/react/styles.css";
 
 export const client = new ApolloClient({
 	uri: `${process.env.NEXT_PUBLIC_API_URL}/graphql`,

apps/admin/src/pages/api/uploadthing.ts

@@ -0,0 +1,9 @@
+/* eslint-disable import/namespace */
+import { createNextPageApiHandler } from "uploadthing/next-legacy";
+import { ourFileRouter } from "@/server/uploadthing";
+
+const handler = createNextPageApiHandler({
+	router: ourFileRouter,
+});
+
+export default handler;

apps/admin/src/server/uploadthing.ts

@@ -0,0 +1,15 @@
+import { createUploadthing, type FileRouter } from "uploadthing/next-legacy";
+
+const f = createUploadthing();
+
+export const ourFileRouter = {
+	// Router for uploading documents
+	kycDocumentUploader: f({
+		image: { maxFileCount: 5 },
+		pdf: { maxFileCount: 5 },
+	}).onUploadComplete(async ({ file }) => {
+		console.log("file url", file.url);
+	}),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;

apps/admin/src/utils/uploadthing.ts

@@ -0,0 +1,6 @@
+/* eslint-disable import/namespace */
+import { generateComponents } from "@uploadthing/react";
+import type { OurFileRouter } from "@/server/uploadthing";
+
+export const { UploadButton, UploadDropzone, Uploader } =
+	generateComponents<OurFileRouter>();