UploadThing: Struggling to authenticate uploads

I am using uploadthing for the first time. I wanted to authenticate a passkey in the middleware after I upload the image.
<form className="flex flex-col gap-10 backdrop-blur-sm bg-neutral-400/10 max-w-fit p-5 place-self-center mt-10 rounded-lg border border-slate-500/50">
<input
type="text"
placeholder="Title (optional)"
className="outline-none bg-transparent border-b py-2 border-slate-300/25"
/>

<input
type="password"
placeholder="Passkey"
className="outline-none bg-transparent border-b py-2 border-slate-300/25"
/>

<UploadDropzone
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
console.log("Files: ", res);
alert("Upload Completed");
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
className="border border-dashed border-slate-300/25 rounded-md p-5"
appearance={{
button: "bg-black",
label: "Upload",

}}
config={{ mode: "manual" }}
content={{
label: "Upload (morally optional)",
}}
onUploadBegin={()=>{

}}
/>
</form>
<form className="flex flex-col gap-10 backdrop-blur-sm bg-neutral-400/10 max-w-fit p-5 place-self-center mt-10 rounded-lg border border-slate-500/50">
<input
type="text"
placeholder="Title (optional)"
className="outline-none bg-transparent border-b py-2 border-slate-300/25"
/>

<input
type="password"
placeholder="Passkey"
className="outline-none bg-transparent border-b py-2 border-slate-300/25"
/>

<UploadDropzone
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
console.log("Files: ", res);
alert("Upload Completed");
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
className="border border-dashed border-slate-300/25 rounded-md p-5"
appearance={{
button: "bg-black",
label: "Upload",

}}
config={{ mode: "manual" }}
content={{
label: "Upload (morally optional)",
}}
onUploadBegin={()=>{

}}
/>
</form>
How do i pass the passkey to the upload request to then be authenticated in the middleware
export const imageFileRouter = {
imageUploader: f({ image: { maxFileSize: "4MB" } })
.middleware(async ({ req }) => {
const { passkey } = req.body.json()
if authenticatePasskey(passkey) throw new Error("error")
})
.onUploadComplete(async ({ metadata, file }) => {
console.log("file url", file.url);
}),
} satisfies FileRouter;
export const imageFileRouter = {
imageUploader: f({ image: { maxFileSize: "4MB" } })
.middleware(async ({ req }) => {
const { passkey } = req.body.json()
if authenticatePasskey(passkey) throw new Error("error")
})
.onUploadComplete(async ({ metadata, file }) => {
console.log("file url", file.url);
}),
} satisfies FileRouter;
Something like this
5 Replies
markr
markr14mo ago
You can pass input to the middleware from the components. https://docs.uploadthing.com/api-reference/server#input-1
Server – uploadthing
Docs for the best file uploader to date
p o h a
p o h a14mo ago
i have seen this but didnt quite get how i would pass the input from the client component i included
markr
markr14mo ago
React – uploadthing
Docs for the best file uploader to date
markr
markr14mo ago
GitHub
uploadthing/examples/appdir/src/app/sink/page.tsx at input-docs · p...
File uploads for modern web devs. Contribute to pingdotgg/uploadthing development by creating an account on GitHub.
p o h a
p o h a14mo ago
YOOO THANKS KING
Want results from more Discord servers?
Add your server