props with uploadthing
Hi, I need help with uploadthing, I've been looking for several hours for a way to pass a props (category) and then add this category with the image url in my database, I'm using exactly the basic configuration of the nextjs app router doc.
Solution:Jump to solution
if you set the input in your endpoint following the docs like this :
`
import { z } from "zod";
f(["imageEndpoint"])...
5 Replies
if you're using the button/dropzone component within a form you can do it through onClientUploadComplete={(res) => {}} that returns the file url in the response
if you you're not doing this within a form you can use a zod schema to validate an input
https://docs.uploadthing.com/api-reference/server#input
Server – uploadthing
Docs for the best file uploader to date
Ty for the answer, but my problem is that I don't know how to send the props to my api route :/
Solution
if you set the input in your endpoint following the docs like this :
import { z } from "zod";
f(["imageEndpoint"])
.input(z.object({ foo: z.string() }))
.middleware(async ({ req, input }) => {
input;
// ^? { foo: string }
return {};
})
.onUploadComplete(async () => {});
you can then pass the input in the component as
<UploadButton<OurFileRouter>
endpoint="imageEndpoint"
onClientUploadComplete={(res) => {
// Do something with the response
console.log("Files: ", res);
alert("Upload Completed");
}}
input={{
foo: "your-string"
}}
/>
OH it works, tysm 🙏