UploadThing: File Uploads That Don’t Make You Want to Quit

If you've ever built a file upload feature in React or Next.js, you know it's rarely just an <input type="file"> and a prayer. You need progress bars, validation, resumable uploads, S3 presigned URLs, error states, and usually a headache to go with it.

UploadThing is an open-source library that handles all of that boilerplate for you, so you can focus on the actual product instead of fighting with multipart forms. It's from the same folks behind T3 and tRPC (the "pingdotgg" crew), so you know it's built by people who care about developer experience.

What It Does

UploadThing is a file upload solution with endpoints, client hooks, and UI components for React, Solid, and Next.js. You define upload endpoints on your server (or in API routes), then use the useUploadThing hook on the client to wire up the whole flow.

It handles:

• File type and size validation
• Upload progress tracking
• Error handling
• Clean URLs returned from your server
• Built-in security with auth callback support

It's not just an S3 wrapper. It's a proper upload pipeline that gives you control over what happens after the file lands, too.

Why It’s Cool

The biggest win here is how little code you need to write. In a Next.js app, you create an endpoint with something like:

import { createUploadthing, type FileRouter } from "uploadthing/next";

const f = createUploadthing();

export const uploadRouter = {
  imageUploader: f({ image: { maxFileSize: "4MB" } })
    .onUploadComplete(({ file }) => {
      console.log("uploaded", file);
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof uploadRouter;

Then on the client:

const { getInputProps, files } = useUploadThing("imageUploader");

That's it. You get a file input that's wired up, validated, and ready to go.

Other things that stand out:

• Works with your existing auth – you can add middleware to your upload routes to check who's uploading.
• No lock-in – it's open source and self-hostable. You can deploy it anywhere.
• Multi-framework – React, Solid, and Next.js are first-class. The API feels consistent across them.

It also has some neat UI utilities, like drag-and-drop styling and file previews, but those are optional. The core value is the workflow.

How to Try It

Clone the repo or check out the live demo first: uploadthing.com

To add it to an existing Next.js project:

npm install uploadthing

You'll also need to set up an instance (hosted or self-hosted). The readme has a full guide for both. If you want to see a complete example, there's an example-app folder in the repo with Next.js and Solid apps pre-configured.

Final Thoughts

File uploads are one of those things that feel simple until you actually build one. UploadThing strips away the tedious parts without boxing you in. If you're starting a new project or have been putting off fixing your current upload flow, give it a spin. It's one of those tools that makes you wonder why it didn't exist sooner.

For more projects like this, follow @githubprojects.