Alex_A
Alex_A4mo ago

File upload with formdata

I'm trying to upload a pdf file to R2 and save metadata to my postgres database (both through a trpc procedure). I followed the example in https://github.com/trpc/trpc/tree/next/examples/next-formdata but I get the error copied below. I have been stuck on this for hours and don't know what I'm doing wrong. Envrionment: Next.js 14.2.4 / pnpm Any help would be greatly appreciated!
❌ tRPC failed on presentation.create: [
{
"code": "invalid_type",
"expected": "string",
"received": "undefined",
"path": [
"userId"
],
"message": "Required"
},
{
"code": "custom",
"message": "Input not instance of File",
"fatal": true,
"path": [
"file"
]
}
]
❌ tRPC failed on presentation.create: [
{
"code": "invalid_type",
"expected": "string",
"received": "undefined",
"path": [
"userId"
],
"message": "Required"
},
{
"code": "custom",
"message": "Input not instance of File",
"fatal": true,
"path": [
"file"
]
}
]
My Form code https://github.com/ysqander/trpc_file_upload/blob/main/src/components/FileUploadForm.tsx My procedure: Presentation.create https://github.com/ysqander/trpc_file_upload/blob/main/src/server/api/routers/presentation.ts
GitHub
trpc/examples/next-formdata at next · trpc/trpc
🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc
GitHub
trpc_file_upload/src/components/FileUploadForm.tsx at main · ysqand...
Contribute to ysqander/trpc_file_upload development by creating an account on GitHub.
GitHub
trpc_file_upload/src/server/api/routers/presentation.ts at main · y...
Contribute to ysqander/trpc_file_upload development by creating an account on GitHub.
Solution:
I couldnt make it work either, my solution was to (exceptionally) do everything in a server action. This allowed me to send a formData object to the action that runs in my server and then use trpc server from within the action to uipdate the entity's URL (I'm assuming u'll need to store the url somewhere afterwards). Hope this helps
Jump to solution
2 Replies
Solution
Nacho Elias
Nacho Elias4mo ago
I couldnt make it work either, my solution was to (exceptionally) do everything in a server action. This allowed me to send a formData object to the action that runs in my server and then use trpc server from within the action to uipdate the entity's URL (I'm assuming u'll need to store the url somewhere afterwards). Hope this helps
Alex_A
Alex_A4mo ago
I see, thanks! I'm gonna try this then