feat: uploadthing

next.config.mjs

@@ -32,9 +32,13 @@ const config = {
       "dcm2976bhgfsz.cloudfront.net",
       "ratemysurau.s3.ap-southeast-1.amazonaws.com",
       "carisurau-staging.s3.ap-southeast-1.amazonaws.com",
-      "lh3.googleusercontent.com"
+      "lh3.googleusercontent.com",
+      "uploadthing.com"
     ],
     dangerouslyAllowSVG: true,
   },
+  experimental: {
+    esmExternals: false,
+  }
 };
 export default config;

package.json

@@ -21,6 +21,7 @@
     "compare-speed": "tsx prisma/compare.ts"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.357.0",
     "@headlessui/react": "^1.7.10",
     "@heroicons/react": "^2.0.15",
     "@next-auth/prisma-adapter": "^1.0.5",
@@ -35,18 +36,23 @@
     "@trpc/react-query": "^10.9.0",
     "@trpc/server": "^10.9.0",
     "@types/nodemailer": "^6.4.8",
+    "@uploadthing/react": "^5.0.0",
+    "framer-motion": "^10.12.16",
     "next": "13.1.6",
     "next-auth": "^4.19.0",
     "next-s3-upload": "^0.3.0",
     "nodemailer": "^6.9.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-select": "^5.7.0",
     "sharp": "^0.32.1",
     "superjson": "1.9.1",
     "tsx": "^3.12.5",
+    "uploadthing": "^5.0.0",
     "use-debounce": "^9.0.3",
-    "zod": "^3.20.2"
+    "zod": "^3.20.2",
+    "zustand": "^4.3.8"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.1",

src/components/shared/SignIn.tsx

@@ -64,7 +64,7 @@ const SignIn: FC<SignInProps> = ({
                         onClick={() => setOpenSignInModal(false)}
                         className="text-sm font-semibold leading-6 text-white"
                       >
-                        Cancel <span aria-hidden="true">→</span>
+                        Cancel
                       </button>
                     </div>
                     <svg

src/pages/api/uploadthing.ts

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

src/server/uploadthing.ts

@@ -0,0 +1,18 @@
+/** server/uploadthing.ts */
+import { createUploadthing, type FileRouter } from "uploadthing/next-legacy";
+
+const f = createUploadthing();
+
+// FileRouter for your app, can contain multiple FileRoutes
+export const ourFileRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: f({ image: { maxFileSize: "4MB", maxFileCount: 10 } })
+    // eslint-disable-next-line @typescript-eslint/require-await
+    .onUploadComplete(async ({ file }) => {
+      // This code RUNS ON YOUR SERVER after upload
+
+      console.log("file url", file.url);
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;

src/store/surau.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface SurauState {
+  imageUploadLoading: boolean;
+  setImageUploadLoading: (value: boolean) => void;
+}
+
+const useSurauStore = create<SurauState>((set) => ({
+  imageUploadLoading: false,
+  setImageUploadLoading: (value: boolean) => set({ imageUploadLoading: value }),
+}));
+
+export default useSurauStore;

src/utils/uploadthing.ts

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