@uploadthing/[email protected]

Major Changes

• #157
  5652869
  Thanks @juliusmarminge! - feat!: allow
  client side metadata to be passed along with the files

  Summary

  You can now pass input along with the files when uploading.

  In your file route:

    withInput: f(["image"])
      .input(
        z.object({
          foo: z.string(),
        }),
      )
      .middleware((opts) => {
        console.log("input", opts.input);
        // input is typed as { foo: string }
        return {};
      })
      .onUploadComplete((data) => {
        console.log("upload completed", data);
      }),

  Then, when uploading, attach the input to the component or the startUpload
  function:

  const { useUploadThing } = generateReactHelpers<typeof OurFileRouter>();
  
  function MyComponent() {
    // Vanilla way
    const { startUpload } = useUploadthing("withInput");
    async function onSubmit(files: File[]) {
      await startUpload(files, { foo: "bar" });
    }
  
    // Component way
    return (
      <UploadButton<OurFileRouter>
        endpoint="withInput"
        input={{ foo: "bar" }} // or use some state to be dynamic
      />
    );
  }

  The input is validated on your server and only leaves your server if you
  pass it along from the .middleware to the .onUploadComplete. If you only
  use the input in the middleware without returning it, the Uploadthing server
  won't have any knowledge of it.

  Breaking changes

  • Options passed in the middleware now comes as an object.

    // before
    route: f(["image"])
      // res only for Next.js pages
      .middleware((req, res) => {
        return {};
      });
    
    // after
    route: f(["image"])
      // res only for Next.js pages
      .middleware((opts) => {
        opts.req; // Request, NextRequest, NextApiRequest depending on runtime
        opts.res; // NextApiResponse for Next.js pages
        opts.input; // typesafe, validated input
        return {};
      });

  • The endpoint option in the useUploadthing hook has been moved out to a
    separate positional argument.

    // before
    useUploadthing({
      endpoint: "withInput"
      onUploadComplete: ...
    })
    
    // after
    useUploadthing("withInput", {
      onUploadComplete: ...
    })

  • The signature for uploadFiles has changed to object syntax.

    // before
    const { uploadFiles } = generateReactHelpers<OurFileRouter>();
    uploadFiles(files, endpoint, { url: "" })
    
    // after
    const { uploadFiles } = generateReactHelpers<OurFileRouter>();
    uploadFiles({
      files,
      endpoint,
      input, // <-- new option
      url,
    })

Minor Changes

• #61
  9162cce
  Thanks @OrJDev! - feat: generateComponents
  functions for solid and react allows to pass the generic FileRouter once
  instead of for everytime the component is used

Patch Changes

• Updated dependencies
  [5652869]:
  • [email protected]

@uploadthing/[email protected]

Major Changes

• #157
  5652869
  Thanks @juliusmarminge! - feat!: allow
  client side metadata to be passed along with the files

  Summary

  You can now pass input along with the files when uploading.

  In your file route:

    withInput: f(["image"])
      .input(
        z.object({
          foo: z.string(),
        }),
      )
      .middleware((opts) => {
        console.log("input", opts.input);
        // input is typed as { foo: string }
        return {};
      })
      .onUploadComplete((data) => {
        console.log("upload completed", data);
      }),

  Then, when uploading, attach the input to the component or the startUpload
  function:

  const { useUploadThing } = generateReactHelpers<typeof OurFileRouter>();
  
  function MyComponent() {
    // Vanilla way
    const { startUpload } = useUploadthing("withInput");
    async function onSubmit(files: File[]) {
      await startUpload(files, { foo: "bar" });
    }
  
    // Component way
    return (
      <UploadButton<OurFileRouter>
        endpoint="withInput"
        input={{ foo: "bar" }} // or use some state to be dynamic
      />
    );
  }

  The input is validated on your server and only leaves your server if you
  pass it along from the .middleware to the .onUploadComplete. If you only
  use the input in the middleware without returning it, the Uploadthing server
  won't have any knowledge of it.

  Breaking changes

  • Options passed in the middleware now comes as an object.

    // before
    route: f(["image"])
      // res only for Next.js pages
      .middleware((req, res) => {
        return {};
      });
    
    // after
    route: f(["image"])
      // res only for Next.js pages
      .middleware((opts) => {
        opts.req; // Request, NextRequest, NextApiRequest depending on runtime
        opts.res; // NextApiResponse for Next.js pages
        opts.input; // typesafe, validated input
        return {};
      });

  • The endpoint option in the useUploadthing hook has been moved out to a
    separate positional argument.

    // before
    useUploadthing({
      endpoint: "withInput"
      onUploadComplete: ...
    })
    
    // after
    useUploadthing("withInput", {
      onUploadComplete: ...
    })

  • The signature for uploadFiles has changed to object syntax.

    // before
    const { uploadFiles } = generateReactHelpers<OurFileRouter>();
    uploadFiles(files, endpoint, { url: "" })
    
    // after
    const { uploadFiles } = generateReactHelpers<OurFileRouter>();
    uploadFiles({
      files,
      endpoint,
      input, // <-- new option
      url,
    })

Minor Changes

• #61
  9162cce
  Thanks @OrJDev! - feat: generateComponents
  functions for solid and react allows to pass the generic FileRouter once
  instead of for everytime the component is used

Patch Changes

• Updated dependencies
  [5652869]:
  • [email protected]

[email protected]

Patch Changes

• #136
  23a9e19
  Thanks @juliusmarminge! - internal
  refactoring to use a new shared package

• Updated dependencies
  [23a9e19,
  23a9e19]:

  • @uploadthing/[email protected]
  • @uploadthing/[email protected]

@uploadthing/[email protected]

Patch Changes

• #136
  23a9e19
  Thanks @juliusmarminge! - internal
  refactoring to use a new shared package

• Updated dependencies
  [23a9e19,
  23a9e19]:

  • @uploadthing/[email protected]
  • [email protected]

@uploadthing/[email protected]

Patch Changes

• #136
  23a9e19
  Thanks @juliusmarminge! - implement a
  shared package that can be used to share types and utils between oss and infra
  repo
• Updated dependencies
  [23a9e19]:
  • @uploadthing/[email protected]

@uploadthing/[email protected]

Patch Changes

• #136
  23a9e19
  Thanks @juliusmarminge! - internal
  refactoring to use a new shared package

• Updated dependencies
  [23a9e19]:

  • @uploadthing/[email protected]

@uploadthing/[email protected]

Minor Changes

• #136
  23a9e19
  Thanks @juliusmarminge! - inhouse a fork
  of mime-types that's edge-ready

[email protected]

Patch Changes

• #145
  8e04d97
  Thanks @markflorkowski! - [fix] Correct
  logic for dev server running message

• #149
  c58b19e
  Thanks @markflorkowski! - [fix] don't
  prefetch component data on server

@uploadthing/[email protected]

Patch Changes

• Updated dependencies
  [8e04d97,
  c58b19e]:
  • [email protected]

@uploadthing/[email protected]

Patch Changes

• #150
  4983acd
  Thanks @markflorkowski! - [misc] Better
  component loading state

• #149
  c58b19e
  Thanks @markflorkowski! - [fix] don't
  prefetch component data on server