Theo's Typesafe Cult•16mo ago

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•16mo 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 aOP•16mo ago

i have seen this but didnt quite get how i would pass the input from the client component i included

markr•16mo ago

The input prop on the drop zone component https://docs.uploadthing.com/api-reference/react#configuration-1

React – uploadthing

Docs for the best file uploader to date

markr•16mo ago

https://github.com/pingdotgg/uploadthing/blob/input-docs/examples/appdir/src/app/sink/page.tsx

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 aOP•16mo ago

YOOO THANKS KING

Gaming

Programming

UploadThing: Struggling to authenticate uploads