docs.uploadthing.com Open in urlscan Pro
76.76.21.164  Public Scan

Form analysis
0 forms found in the DOM

Text Content

UPLOADTHINGDOCS

Dashboard ↗Dashboard ↗ (opens in a new tab)
CTRL K
GitHubGitHub (opens in a new tab)DiscordDiscord (opens in a new tab)
CTRL K
 * Introduction
 * Getting Started
    * Next.js (app/)
    * Next.js (pages/)
    * SolidStart
    * SvelteKit (Coming Soon)
    * Nuxt.js (Coming Soon)
    * Astro (Coming Soon)

 * --------------------------------------------------------------------------------

 * Backend Adapters
    * Express
    * Fastify
    * Fetch / Edge Runtimes
    * H3

 * Theming
 * API Reference
    * React
    * Next
    * Server

 * Error Handling

 * --------------------------------------------------------------------------------

 * Frequently Asked Questions (FAQ)
 * Roadmap (opens in a new tab)

Light




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)}
/>