Theo's Typesafe Cult•3mo ago

How to send additional information with a file using UploadThing?

Hey everyone! I have had a great time implementing upload thing into my application using the docs and would love to profit from the simplicity of using the inbuilt frontend components aswell! To properly authorize the usage and categorize the file in the database, I need to send additional information about the files context to the authorization middle ware including ids of objects that the files belong to, unfortunatly I havent seen any simple way to do this using the generated components... Has anyone had that problem before? The behaviour I would like (for example):

<UploadButton /> --> /api/uploadthing?objectId=123 --> .middleware((req) => ... req.nextUrl.searchParams.get("objectId"))

<UploadButton /> --> /api/uploadthing?objectId=123 --> .middleware((req) => ... req.nextUrl.searchParams.get("objectId"))

Or even better would be

<UploadButton someCustomContent={content} /> --> /api/uploadthing --> .middleware((req, content) => ... content.objectId)

<UploadButton someCustomContent={content} /> --> /api/uploadthing --> .middleware((req, content) => ... content.objectId)

1 Reply

Juraj98•3mo ago

You can set input both on the FE component and in the filerouter middleware. FE docs (look for input in the table) BE docs

Gaming

Programming

How to send additional information with a file using UploadThing?