7 replies

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

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 () => {});


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


  <UploadButton<OurFileRouter>
    endpoint="imageEndpoint"
    onClientUploadComplete={(res) => {
      // Do something with the response
      console.log("Files: ", res);
      alert("Upload Completed");
    }}
    input={{
       foo: "your-string"
     }}
  />

Jump to solution

TTC

Theo's Typesafe Cult•2y ago•

7 replies

Acridly

props with uploadthing

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 () => {});


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


  <UploadButton<OurFileRouter>
    endpoint="imageEndpoint"
    onClientUploadComplete={(res) => {
      // Do something with the response
      console.log("Files: ", res);
      alert("Upload Completed");
    }}
    input={{
       foo: "your-string"
     }}
  />

Jump to solution

props with uploadthing

Similar Threads

props with uploadthing

Similar Threads

Similar Threads

Similar Threads