The UploadThing components look all weird, what's going on?

If your components appear unstyled, you likely forgot to import our CSS file from the React package. Don't forget to add the following to your root layout.tsx or _app.tsx:

import "@uploadthing/react/styles.css";

Some of my other components look weird now... what's up with that?

You may need to check the order of imports. Making sure that the uploadthing component styles are imported before others usually does the trick

import "@uploadthing/react/styles.css";
import "../styles/globals.css";

When I upload files, I get the error Failed to simulate callback for file. Is your webhook configured correctly?

This error is our catch-all if we were unable to query the /api/uploadthing endpoint. Almost every time we've seen someone who has this issue, it's because their middleware.ts is configured incorrectly.

Make sure that /api/uploadthing is NOT blocked through your middleware. It serves as both a validation endpoint from client AND a webhook for the onUploadComplete calls.

I'm getting a Type ... is not assignable to type '"You forgot to pass the generic"' error

This occurs when you're importing the UploadButton or UploadDropzone components from @uploadthing/react or @uploadthing/solid directly, and not generating your own typesafe components using generateComponents. While you can do this, it is not recommended as you have to provide the generics yourself in order to get full typesafety.

import { UploadButton } from "@uploadthing/react";
 
import type { OurFileRouter } from "~/app/api/uploadthing/core";
 
<UploadButton<OurFileRouter, "myFileRoute">
  endpoint="myFileRoute"
  // ...
/>;

As you can see, it's quite cumbersome having to provide the generics yourself, especially since the endpoint prop must be specified twice due to lack of partial inference in TypeScript.

My callback runs in development but not in production

In order for UploadThing to work, our external server have to be able to reach your application in order to trigger the callbacks you have set up in your file router. This is not possible if your application is running on localhost.

When you're running in development, UploadThing will simulate this callback for you so that you can test your application. However, for production we require your application to be reachable over the internet. The URL we'll attempt to hit is automatically inferred based on the request. There are mainly two reasons why your app would not be reachable by the callback:

You're testing a production build locally.

In this case, you can use a tool like ngrok (opens in a new tab) or Cloudflare Tunnels (opens in a new tab) to expose your application to the internet. Start the application with the UPLOADTHING_URL variable set to the tunneled URL.

Your app is running behind a reverse proxy such as Nginx.

The automatic URL inference unfortunately breaks for certain reverse proxy setups. In this case, set either the config.callbackUrl when you're creating the server entrypoints or the UPLOADTHING_URL environment variable to the public URL of your application.

You will get a warning in the console if we detect a localhost URL is being used as the callback URL in production.