@clawdyup/react

generateUploadButton

Returns a typed UploadButton component bound to your FileRouter. Use this when you only need the button component.

import { generateUploadButton } from "@clawdyup/react";
import type { FileRouter } from "@/server/clawdy";

export const UploadButton = generateUploadButton<FileRouter>();

Usage

<UploadButton
  endpoint="profileImage"
  onClientUploadComplete={(res) => {
    console.log("Uploaded files:", res);
  }}
  onUploadError={(error) => {
    console.error("Upload failed:", error.message);
  }}
/>

generateUploadDropzone

Returns a typed UploadDropzone component bound to your FileRouter. Use this when you only need the dropzone component.

import { generateUploadDropzone } from "@clawdyup/react";
import type { FileRouter } from "@/server/clawdy";

export const UploadDropzone = generateUploadDropzone<FileRouter>();

Usage

<UploadDropzone
  endpoint="documentUploader"
  onClientUploadComplete={(res) => {
    console.log("Uploaded files:", res);
  }}
  onUploadError={(error) => {
    console.error("Upload failed:", error.message);
  }}
/>

generateReactHelpers

Returns all React primitives at once: the UploadButton component, the UploadDropzone component, and the useClawdy hook, all typed to your FileRouter.

import { generateReactHelpers } from "@clawdyup/react";
import type { FileRouter } from "@/server/clawdy";

export const { UploadButton, UploadDropzone, useClawdy } =
  generateReactHelpers<FileRouter>();

useClawdy

A hook for building fully custom upload UIs. Returned by generateReactHelpers.

const { startUpload, isUploading } = useClawdy(endpoint, opts);

Parameters

Parameter	Type	Description
`endpoint`	`keyof FileRouter`	The name of the route in your `FileRouter`.
`opts`	`object \| undefined`	Optional callbacks (see below).

Options

Option	Type	Description
`onClientUploadComplete`	`(res: UploadFileResponse[]) => void`	Called when all files finish uploading.
`onUploadError`	`(error: Error) => void`	Called if the upload fails.
`onUploadProgress`	`(progress: number) => void`	Called with the upload progress percentage (0-100).
`onUploadBegin`	`(fileName: string) => void`	Called when each file begins uploading.

Returns

Property	Type	Description
`startUpload`	`(files: File[], options?: { input?: object }) => Promise<UploadFileResponse[]>`	Trigger the upload. Pass metadata via `options.input` matching the route's `.input()` schema.
`isUploading`	`boolean`	Whether an upload is currently in progress.

Example

function CustomUploader() {
  const { startUpload, isUploading } = useClawdy("profileImage", {
    onClientUploadComplete: (res) => {
      console.log("Done!", res);
    },
    onUploadError: (err) => {
      alert(err.message);
    },
    onUploadProgress: (progress) => {
      console.log(`${progress}% uploaded`);
    },
  });

  return (
    <div>
      <input
        type="file"
        onChange={async (e) => {
          const files = Array.from(e.target.files ?? []);
          await startUpload(files, { input: { userId: "user_123" } });
        }}
        disabled={isUploading}
      />
      {isUploading && <p>Uploading...</p>}
    </div>
  );
}

UploadButton Props

Prop	Type	Required	Description
`endpoint`	`keyof FileRouter`	Yes	The upload route to use.
`input`	`object`	No	Metadata object matching the route's `.input()` Zod schema.
`onClientUploadComplete`	`(res: UploadFileResponse[]) => void`	No	Called when all files have been uploaded successfully.
`onUploadError`	`(error: Error) => void`	No	Called when the upload fails.
`onUploadProgress`	`(progress: number) => void`	No	Called with the upload progress percentage (0-100).
`onUploadBegin`	`(fileName: string) => void`	No	Called when each individual file starts uploading.
`onBeforeUploadBegin`	`(files: File[]) => File[]`	No	Called before the upload begins. Return a modified array of files (e.g. to rename or filter).
`disabled`	`boolean`	No	Disables the button when `true`.
`className`	`string`	No	CSS class name applied to the root element.

UploadDropzone Props

Prop	Type	Required	Description
`endpoint`	`keyof FileRouter`	Yes	The upload route to use.
`input`	`object`	No	Metadata object matching the route's `.input()` Zod schema.
`onClientUploadComplete`	`(res: UploadFileResponse[]) => void`	No	Called when all files have been uploaded successfully.
`onUploadError`	`(error: Error) => void`	No	Called when the upload fails.
`onUploadProgress`	`(progress: number) => void`	No	Called with the upload progress percentage (0-100).
`onUploadBegin`	`(fileName: string) => void`	No	Called when each individual file starts uploading.
`onBeforeUploadBegin`	`(files: File[]) => File[]`	No	Called before the upload begins. Return a modified array of files (e.g. to rename or filter).
`disabled`	`boolean`	No	Disables the dropzone when `true`.
`className`	`string`	No	CSS class name applied to the root element.

@clawdyup/react

On this page