Alex_A•7mo 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•7mo ago

Alex_AOP•7mo ago

I see, thanks! I'm gonna try this then

File upload with formdata

Did you find this page helpful?