CODEWITHSUNDEEP
typescriptnext.jszodtrpct3
Olav Ausland
Olav Ausland

Reputation: 98

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

Upvotes: 3

Views: 8112

Answers (2)

Maurici Abad
Maurici Abad

Reputation: 1728

At the time of writing this, tRPC doesn't support FormData. There are some experimental methods available, but I couldn't manage to make them work.

Solution 1: Presigned URL's

Upload the image directly to S3 via a presigned URL provided by a tRPC procedure. When the image has been uploaded, you can call another tRPC procedure to update any records in your database.

This has the benefit of making the upload faster and reduces the load on your Next.js server, but has the downside that you can't pre-process the image and that if there's an error you may end up with an orphan image in the s3 bucket.

Solution 2: Use Next.js 13 API routes

Set up a new route in src/app/api/ to handle file uploads. Note: Keep using tRPC for everything else in the app, and just use these endpoints to upload files.

With this alternative you can process images and have a better control of the flow, in exchange of more bandwith used.

Check out this answer where I show how I did it in my project:

POST multipart/form-data to Serverless Next.js API (running on Vercel / Now.sh)

Other solutions

You could try to use the tRPC's experimental FormData features, at your risk.

Upvotes: 2

Samuel Newman
Samuel Newman

Reputation: 184

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.

Upvotes: 4

Related Questions