Display an Upload Button

Author: ThomasCode92

src/app/api/uploadthing/route.ts

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

src/app/drive-contents.tsx

@@ -4,8 +4,10 @@ import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
 import { ChevronRight } from "lucide-react";
 import Link from "next/link";
 
+import { UploadButton } from "~/components/uploadthing";
 import type { File, Folder } from "~/server/db/schema";
 import { FileRow, FolderRow } from "./file-row";
+import { UploadButton } from "~/components/uploadthing";
 
 export default function DriveContents(props: {
   files: File[];
@@ -59,6 +61,7 @@ export default function DriveContents(props: {
             ))}
           </ul>
         </div>
+        <UploadButton endpoint="imageUploader" />
       </div>
     </div>
   );

src/components/uploadthing.ts

@@ -0,0 +1,5 @@
+import { generateUploadButton } from "@uploadthing/react";
+
+import type { OurFileRouter } from "~/app/api/uploadthing/core";
+
+export const UploadButton = generateUploadButton<OurFileRouter>();

src/styles/globals.css

@@ -1,10 +1,14 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@import "uploadthing/tw/v4";
+@source "../../node_modules/@uploadthing/react/dist"; /** <-- depends on project structure */
+
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
+  --font-sans:
+    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }