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"
    ]
  }
]

`
❌ 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

trpc/examples/next-formdata at next · 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

File upload with formdata

Similar Threads

Similar Threads

Similar Threads