Theo's Typesafe Cult•8mo ago

Increase api file size limit on t3 stack

Im sending a image that exceeds 1mb file size limit of nextjs api route handler, and want to increase the limit. I have found posts that talk about it like this one https://github.com/trpc/trpc/discussions/2590, but can't figure out where to apply this when im using the t3 stack. here is my [trpc].ts where i see this post talking about : ' import { createNextApiHandler } from "@trpc/server/adapters/next"; import { env } from "../../../env.mjs"; import { appRouter } from "../../../server/api/root"; import { createTRPCContext } from "../../../server/api/trpc"; // export API handler export default createNextApiHandler({
router: appRouter, createContext: createTRPCContext, onError: env.NODE_ENV === "development" ? ({ path, error }) => { console.error( ❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message} ); } : undefined, }); '

GitHub

Body exceeded 1mb limit error in NextJS · trpc trpc · Discussion #2...

Provide environment information System: OS: macOS 12.5.1 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 233.28 MB / 16.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 18.7.0 - /usr/lo...

4 Replies

Sturlen•8mo ago

File size is set in the FileRouter, usually under app/api/uploadthing/core.ts if you're following the example in the docs: https://docs.uploadthing.com/getting-started/appdir#creating-your-first-fileroute Your FileRouter should look like this. Set "maxFileSize" to what you need:

// 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" } })
...

// 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" } })
...

The issue you linked seems to be a tPRC specific issue with uploading large files directly to your server, which is different from what UploadThing does.

Next.js App Router Setup – uploadthing

Docs for the best file uploader to date

realmers•8mo ago

Sorry i think there is a misunderstanding im sending a file from my client to a procedure that uploads that image to a storage bucket on supabase. The issue is that i cant send the file to my server because requests have file size limit.

Sturlen•8mo ago

I totally misread that, my bad! Supabase seems to support presigned urls that let you upload directly from the client to supabase, without going through your route handler: https://supabase.com/docs/reference/javascript/storage-from-uploadtosignedurl

Upload to a signed URL | Supabase

realmers•8mo ago

I have got everything setup for sending the file to my serverside procedure, so I would love to continue with that for now. But thanks for the info. Im still looking for how to increase the file size limit. i found the solution to my problem which was to put 'export const config = { api: { bodyParser: false, }, }' in the same file as [trpc].ts along side everything else in the file

Gaming

Programming

Increase api file size limit on t3 stack