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.