What Is UploadThing?

UploadThing is the easiest way to add file uploads to your full stack TypeScript application. Many services have tried to build a "better S3", but in our opinion, none found the right compromise of ownership, flexibility and safety.

Doing this well involves getting three key pieces correct: File Hosting, Server-side Authorization, and Client Experience.

1. We Manage File Hosting (Like S3, But Simpler)

Managing files is...annoying, to say the least. That's why we do it for you! Right now we're mostly just wrapping S3 with caching and callbacks (opens in a new tab), but we have some fun stuff planned 🤐.

This is the ONLY thing we charge for, and our prices are pretty simple (opens in a new tab)

2. Authorize Users On YOUR Server

You don't post to uploadthing.com. You post to /api/uploadthing on your own service

We really don't like the idea that easier file uploads means giving up ownership or control. To use UploadThing, you have to host the endpoint for it on your own servers.

We provide an open source server API (opens in a new tab) for authenticating and signing uploads in your backend without your server processing the file. This is the best of both worlds, you get full control while avoiding all the bandwidth costs.

btw, it's fully typesafe and ready for auth 😉

  profilePicture: f(["image"])
    .middleware(({ req }) => auth(req))
    .onUploadComplete((data) => console.log("file", data)),

3. Give Clients A Great Experience

We provide an open source React client library (opens in a new tab) for uploading files from your frontend with convenient components, hooks and more. Want a quick "upload image" button? Check out <UploadButton />. Want a super customized form with a bulk image uploader? useUploadThing() has you covered.

// Using the generic makes this typesafe against YOUR valid upload endpoints
<UploadButton<OurFileRouter>
  endpoint="imageUploader"
  onUploadComplete={(files) => console.log("files", files)}
/>