Search code examples
typescriptnext.jszodtrpct3

Send blob (image) from frontend to backend with nextjs and trpc (T3 stack)


I'm trying to send a picture of a leaflet map from the backend to the frontend where i use the leaflet-simple-map-screenshoter library for taking the image. This returns a blob which i want to send to the backend so I can save it into a PDF. I am using the T3 stack which uses Next.js with TRPC. I have tried numerous ways to send it, base64, plain Blob, ArrayBuffer and etc. The problem which arises is that the header request when i send it to the backend is either to large or that it just do not transfer the Blob object correctly.

Do anyone have any idea on how i can solve this? Let me know if you want any other information and i will update the post as soon as possible, thanks!

Regards Olav


Solution

  • You should not send blobs via tRPC. You should use presigned URLs if you want to send large files to storage. The solution best integrated with the T3 stack will be uploadthing, but you can use S3/R2/others directly.

    tRPC support for FormData is currently in the works, so this answer may change when that lands.