Introduction

upload-stuff is a typed, bring-your-own-bucket file-upload library for React and Next.js: presigned S3 uploads with one router definition that types both server and client. Define a file router on the server, wire it into your Next.js App Router, and call useUploadStuff from the client.

One definition on the server types both your handlers and the client hook. Every sample on this site is type-checked against the current packages, so the hover below is the real inferred type — hover ServerData:

const f = createUploadStuffRouter<typeof uploadStuff, { userId: string }>();

const avatar = f({ isPublic: true, files: ["image/*"], maxFileSize: "4MB" })
  .middleware(({ ctx }) => ({ uploadedBy: ctx.userId }))
  .onUploadComplete(({ middlewareData }) => ({ owner: middlewareData.uploadedBy }))
  .build();

type ServerData = (typeof avatar)["$types"]["output"];
        
type ServerData = {
    owner: string;
}

See Type safety for the full server-to-client chain.

Next steps