feat: file uploads

.env.example

@@ -29,6 +29,8 @@ NEXT_PUBLIC_POSTHOG_HOST="https://eu.i.posthog.com" # Probably, if your Posthog
 NEXT_PUBLIC_AXIOM_DATASET="..." # Is the name of the Axiom dataset where you want to send data.
 NEXT_PUBLIC_AXIOM_TOKEN="..." # Is the Axiom API token you have generated.
 
+# Uploadthing
+UPLOADTHING_TOKEN="..."
 
 # Enviroment variables that Convex will automatically set up for you
 CONVEX_DEPLOYMENT="dev:..."

package.json

@@ -37,6 +37,7 @@
     "@sentry/nextjs": "^8",
     "@serwist/next": "9.0.11",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "@uploadthing/react": "^7.1.2",
     "babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -65,6 +66,7 @@
     "sonner": "^1.7.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "uploadthing": "^7.4.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/app/api/sign-up/route.ts

@@ -26,7 +26,7 @@ export async function OPTIONS(request: Request) {
   }
 }
 
-// TODO: This probably deserves a rate limiter + a check for not creating a bunch of trash users to spam us.
+// TODO: This deserves a rate limiter + a check for not creating a bunch of trash users to spam us. Example: https://github.com/t3dotgg/t3gallery/blob/main/src/server/ratelimit.ts
 export async function POST(request: Request) {
   const unparsedSignUpHeaders = (await request.json()) as FormSchemaSignUp;
   const parsedSignUpHeaders = formSchemaSignUp.safeParse(unparsedSignUpHeaders);

src/app/api/uploadthing/core.ts

@@ -0,0 +1,58 @@
+import { auth } from "@clerk/nextjs/server";
+import { log } from "next-axiom";
+import { createUploadthing, type FileRouter } from "uploadthing/next";
+import { UploadThingError } from "uploadthing/server";
+
+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
+  fileUploader: f({
+    image: {
+      /**
+       * For full list of options and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
+      maxFileSize: "4MB",
+      maxFileCount: 20,
+    },
+    video: {
+      maxFileSize: "16MB",
+      maxFileCount: 5,
+    },
+    blob: {
+      maxFileSize: "8MB",
+      maxFileCount: 20,
+    },
+  })
+    // Set permissions and file types for this FileRoute
+    .middleware(async () => {
+      // This code runs on your server before upload
+      const user = await auth();
+
+      // If you throw, the user will not be able to upload
+      if (!user.userId)
+        // eslint-disable-next-line @typescript-eslint/only-throw-error
+        throw new UploadThingError({
+          message: "Unauthorized",
+          code: "FORBIDDEN",
+        });
+
+      // TODO: This deserves a rate limiter + a check for not creating a bunch of trash files to spam us. Example: https://github.com/t3dotgg/t3gallery/blob/main/src/server/ratelimit.ts
+
+      // Whatever is returned here is accessible in onUploadComplete as `metadata`
+      return { userId: user.userId };
+    })
+    .onUploadComplete(async ({ metadata }) => {
+      // This code RUNS ON YOUR SERVER after upload
+      log.info("Upload complete");
+
+      // TODO: Call Convex to store the file in the db
+
+      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
+      return { uploadedBy: metadata.userId };
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof ourFileRouter;

src/app/api/uploadthing/route.ts

@@ -0,0 +1,10 @@
+import { createRouteHandler } from "uploadthing/next";
+import { ourFileRouter } from "./core";
+
+// Export routes for Next App Router
+export const { GET, POST } = createRouteHandler({
+  router: ourFileRouter,
+
+  // Apply an (optional) custom config:
+  // config: { ... },
+});