@uploadthing/[email protected]

Patch Changes

• #205
  8658002
  Thanks @juliusmarminge! - chore(deps):
  update dependency '@uploadthing/shared'

• #207
  f3640fb
  Thanks @markflorkowski! - fix(shared):
  Swap order of cases in getUploadthingUrl()

• Updated dependencies
  [c508868,
  f3640fb,
  a6c969e]:

  • @uploadthing/[email protected]

@uploadthing/[email protected]

Minor Changes

• #195
  a6c969e
  Thanks @juliusmarminge! - feat: improve
  errors and add errorFormatter option on the backend

Patch Changes

• #192
  c508868
  Thanks @GentikSolm! - fix(types): change
  internal types to solve declaration emitting

• #207
  f3640fb
  Thanks @markflorkowski! - fix(shared):
  Swap order of cases in getUploadthingUrl()

@uploadthing/[email protected]

Minor Changes

• #195
  a6c969e
  Thanks @juliusmarminge! - feat: improve
  errors and add errorFormatter option on the backend

Patch Changes

• #205
  8658002
  Thanks @juliusmarminge! - chore(deps):
  update dependency '@uploadthing/shared'

• #207
  f3640fb
  Thanks @markflorkowski! - fix(shared):
  Swap order of cases in getUploadthingUrl()

• Updated dependencies
  [c508868,
  f3640fb,
  a6c969e]:

  • @uploadthing/[email protected]

[email protected]

Minor Changes

• #176
  9f56c64
  Thanks @GentikSolm! - feat: upload progress

Patch Changes

• #155
  9797f51
  Thanks @OrJDev! - fix(solid): make sure running
  info only prints on server & server code doesn't leak

• #185
  a0cc65c
  Thanks @markflorkowski! - [fix] Add
  missing size to file object in simulated callback

• Updated dependencies
  [a0cc65c]:

  • @uploadthing/[email protected]

@uploadthing/[email protected]

Minor Changes

• #176
  9f56c64
  Thanks @GentikSolm! - feat: upload progress

• #155
  9797f51
  Thanks @OrJDev! - fix(solid): make sure running
  info only prints on server & server code doesn't leak

Patch Changes

• #186
  a9e1eaa
  Thanks @GentikSolm! - fix: disable preflight
  and add reset styles inline

• Updated dependencies
  [a0cc65c]:

  • @uploadthing/[email protected]

@uploadthing/[email protected]

Patch Changes

• #185
  a0cc65c
  Thanks @markflorkowski! - [fix] Add
  missing size to file object in simulated callback

@uploadthing/[email protected]

Minor Changes

• #176
  9f56c64
  Thanks @GentikSolm! - feat: upload progress

Patch Changes

• #186
  a9e1eaa
  Thanks @GentikSolm! - fix: disable preflight
  and add reset styles inline

• Updated dependencies
  [a0cc65c]:

  • @uploadthing/[email protected]

[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,
    })

@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]