docs: add link to FileRoute API in copy-pasteable code block (#1060)

Co-authored-by: Mark R. Florkowski <mark.florkowski@gmail.com>

docs/src/app/(docs)/api-reference/ut-api/page.mdx

@@ -32,16 +32,18 @@ To get started, initialize an instance of `UTApi`.
 ```ts {{ title: "~/server/uploadthing.ts" }}
 import { UTApi } from "uploadthing/server";
 
-export const utapi = new UTApi();
+export const utapi = new UTApi({
+  // ...options,
+});
 ```
 
 ### Options
 
-You can configure the SDK either by passing a config object to the
-`createRouteHandler` function, or by setting them as environment variables.
-Environment variables follows the naming convention of `UPLOADTHING_<NAME>`
-,where `<NAME>` is the name of the config option in constant case, e.g.
-`UPLOADTHING_LOG_LEVEL`. If both are set, the config object takes precedence.
+You can configure the SDK either by passing them as options to the constructor,
+or by setting them as environment variables. Environment variables follow the
+naming convention of `UPLOADTHING_<NAME>` ,where `<NAME>` is the name of the
+config option in constant case, e.g. `UPLOADTHING_LOG_LEVEL`. If both are set,
+the config object takes precedence.
 
 <Properties>
   <Property

docs/src/app/(docs)/backend-adapters/express/page.mdx

@@ -40,6 +40,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -52,10 +54,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/express";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: f({
     image: {
+      /**
+       * For full list of options and defaults and defaults, see the File Route API reference
+       * @see https://docs.uploadthing.com/file-routes#route-config
+       */
       maxFileSize: "4MB",
-      maxFileCount: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/backend-adapters/fastify/page.mdx

@@ -40,6 +40,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -52,10 +54,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/fastify";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: 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: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/backend-adapters/fetch/page.mdx

@@ -42,6 +42,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -54,10 +56,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/server";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: 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: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/backend-adapters/h3/page.mdx

@@ -44,6 +44,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -56,10 +58,15 @@ import { createUploadthing, type FileRouter } from "uploadthing/h3";
 const f = createUploadthing();
 
 export const uploadRouter = {
+  // Define as many FileRoutes as you like, each with a unique routeSlug
   imageUploader: 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: 4,
+      maxFileCount: 1,
     },
   }).onUploadComplete((data) => {
     console.log("upload completed", data);

docs/src/app/(docs)/getting-started/appdir/page.mdx

@@ -41,6 +41,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -58,7 +60,16 @@ const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 // 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" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/astro/page.mdx

@@ -47,6 +47,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -63,7 +65,16 @@ const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 // 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" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/expo/page.mdx

@@ -54,6 +54,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -69,9 +71,15 @@ const f = createUploadthing();
 const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 
 const uploadRouter = {
-  profileImage: f({
+  // Define as many FileRoutes as you like, each with a unique routeSlug
+  imageUploader: 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: 1,
     },
   })
     .middleware(async ({ req }) => {
@@ -148,7 +156,7 @@ import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
 import { useImageUploader } from "~/utils/uploadthing";
 
 export default function Home() {
-  const { openImagePicker, isUploading } = useImageUploader({
+  const { openImagePicker, isUploading } = useImageUploader("imageUploader", {
     /**
      * Any props here are forwarded to the underlying `useUploadThing` hook.
      * Refer to the React API reference for more info.

docs/src/app/(docs)/getting-started/nuxt/page.mdx

@@ -83,6 +83,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -107,7 +109,16 @@ const auth = (ev: H3Event) => ({ id: "fakeId" }); // Fake auth function
 // FileRouter for your app, can contain multiple FileRoutes
 export const uploadRouter = {
   // Define as many FileRoutes as you like, each with a unique routeSlug
-  imageUploader: f({ image: { maxFileSize: "4MB" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ event }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/pagedir/page.mdx

@@ -42,6 +42,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -61,7 +63,16 @@ const auth = (req: NextApiRequest, res: NextApiResponse) => ({ id: "fakeId" });
 // 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" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req, res }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/remix/page.mdx

@@ -41,6 +41,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -60,7 +62,16 @@ const auth = (args: ActionFunctionArgs) => ({ id: "fakeId" }); // Fake auth func
 // FileRouter for your app, can contain multiple FileRoutes
 const uploadRouter = {
   // Define as many FileRoutes as you like, each with a unique routeSlug
-  imageUploader: f({ image: { maxFileSize: "4MB" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ event }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/solid/page.mdx

@@ -38,6 +38,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -54,7 +56,16 @@ const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 
 export const uploadRouter = {
   // Define as many FileRoutes as you like, each with a unique routeSlug
-  imageUploader: f({ image: { maxFileSize: "4MB" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/svelte/page.mdx

@@ -38,6 +38,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -55,7 +57,16 @@ const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 // 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" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req }) => {
       // This code runs on your server before upload

docs/src/app/(docs)/getting-started/tanstack-start/page.mdx

@@ -38,6 +38,8 @@ of a FileRoute similar to an endpoint, it has:
 
 - Permitted types ["image", "video", etc]
 - Max file size
+- How many files are allowed to be uploaded
+- (Optional) `input` validation to validate client-side data sent to the route
 - (Optional) `middleware` to authenticate and tag requests
 - `onUploadComplete` callback for when uploads are completed
 
@@ -55,7 +57,16 @@ const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
 // FileRouter for your app, can contain multiple FileRoutes
 export const uploadRouter = {
   // Define as many FileRoutes as you like, each with a unique routeSlug
-  imageUploader: f({ image: { maxFileSize: "4MB" } })
+  imageUploader: 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: 1,
+    },
+  })
     // Set permissions and file types for this FileRoute
     .middleware(async ({ req }) => {
       // This code runs on your server before upload