[bug]: onUploadComplete is never fired - Callback Failed - local development

[heinsenberg82]

Provide environment information

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 38.46 GB / 63.92 GB
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (129.0.2792.65)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @uploadthing/react: ^7.1.3 => 7.1.3
    typescript: ^5 => 5.6.3
    uploadthing: ^7.4.1 => 7.4.1

Describe the bug

I'm having the same or similar issue described here (#920), but with Next 15. File is uploaded successfully, with no errors in console.

userID: fakeId
{"message":"Sending presigned URLs to client","logLevel":"INFO","timestamp":"2025-01-06T17:18:39.329Z","annotations":{"presignedUrls":[{"url":"[...]","key":"[...]]","name":"file.pdf","customId":null}]},"spans":{"handleUploadAction":126},"fiberId":"#13"}
 POST /api/uploadthing?actionType=upload&slug=productUploader 200 in 4350ms

However, onUploadComplete callback is never fired. My dashboard shows "Callback Failed" for all uploads.

I have all api routes excluded from middleware. Here's some relevant code:

export const ourFileRouter = {
    // Define as many FileRoutes as you like, each with a unique routeSlug
    productUploader: f({
        pdf: {
            maxFileSize: "4MB", maxFileCount: 8
        }
    })
        // Set permissions and file types for this FileRoute
        .middleware(async ({ req }) => {
            // This code runs on your server before upload
            const user = await fakeAuth(req) // always returns an user object with fake Id

            // If you throw, the user will not be able to upload
            // eslint-disable-next-line @typescript-eslint/only-throw-error
            if (!user) throw new UploadThingError("Unauthorized")

            console.log("userID:", user.id)

            // Whatever is returned here is accessible in onUploadComplete as `metadata`
            return { userId: user.id }
        })
        .onUploadError(async ({ error, fileKey }) => {
            // This code runs on your server after an upload error
            console.log("Upload error:", error)
        })
        .onUploadComplete(async ({ metadata, file }) => {
            // This code RUNS ON YOUR SERVER after upload
            console.log("Upload complete for userId:", metadata.userId)

            console.log("file url", file.url)

            // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
            return { uploadedBy: metadata.userId }
        }),
} satisfies FileRouter

Link to reproduction

https://stackblitz.com/github/pingdotgg/uploadthing/tree/main/examples/minimal-appdir

To reproduce

// not applicable

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Code of Conduct

• I agree to follow this project's Code of Conduct

[eik-1]

Is this related to the bug where when I try to upload an image, the POST req to the server gives an error code 500
I have seen the same with all the demo-t3gallery projects on github that have implemented uploadthing

[markflorkowski]

However, onUploadComplete callback is never fired. My dashboard shows "Callback Failed" for all uploads.

If you hover over one of those items, does it give you any additional information?

Is this related to the bug where when I try to upload an image, the POST req to the server gives an error code 500

Not sure what you are referring to here either, can you link a repro?

[heinsenberg82]

If you hover over one of those items, does it give you any additional information?

Hovering over an item just shows the file's download link. Going to the logs, they look like this:

I noticed uploadThing get's my LAN IP, not my loopback address. Don't know if this is relevant.

[markflorkowski]

Hovering over an item just shows the file's download link. Going to the logs, they look like this:

Sorry to clarify - I meant if you hover over the "calback failed" - there should be a (i) icon

I noticed uploadThing get's my LAN IP, not my loopback address. Don't know if this is relevant.

Seems like environment detection is not working correctly. can you try setting UPLOADTHING_IS_DEV=true and seeing if the issue persists?

[heinsenberg82]

Seems like environment detection is not working correctly. can you try setting UPLOADTHING_IS_DEV=true and seeing if the issue persists?

Yep! Setting this inside my .env.local solves it! Now my IP is getting resolved to localhost. 😊 I didn't see this UPLOADTHING_IS_DEV variable in the documentation, though.

[juliusmarminge]

this should already be fixed. try upgrading to 7.4.3 or later.

re: config, all config can be set either through the config object or through env vars as explained here: https://docs.uploadthing.com/api-reference/server#config-parameters

[eik-1]

Following the video by Theo I run into some error which is persitent in prod
This is my core.ts file inside app/api/uploadthing :

import { auth } from "@clerk/nextjs/server";
import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
import { db } from "~/server/db";
import { images } from "~/server/db/schema";

const f = createUploadthing();

export const ourFileRouter = {
  // Define as many FileRoutes as you like, each with a unique routeSlug
  imageUploader: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 1,
    },
  })
    // Set permissions and file types for this FileRoute
  .middleware(async ({ req }) => {
      try {
        const user = await auth();
        if (!user.userId) throw new UploadThingError("Unauthorized");

        return { userId: user.userId };
      } catch (error) {
        throw new UploadThingError("Unauthorized");
      }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      try {
        console.log("onUploadComplete");
        await db.insert(images).values({
          name: file.name,
          url: file.url,
          userId: metadata.userId,
        });

        return { uploadedBy: metadata.userId };
      } catch (error) {
        console.log(error);
      }
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

This is the route.ts :

import { createRouteHandler } from "uploadthing/next";

import { ourFileRouter } from "./core";

export const { GET, POST } = createRouteHandler({
  router: ourFileRouter,
});

When I try to upload the POST request doesn't go through and gives a 500 status code in return

My Github Repo for the project

[markflorkowski]

Can you share a screenshot of the 500 error you are getting? Also enable debug logging on your route?
https://docs.uploadthing.com/api-reference/server#create-route-handler

[andyzeli]

For Fastify this caused me a few hours of headache only to realize I missed the fact that since v7 you have to pass in the dev flag when in dev like so:

app.register(createRouteHandler, { router: uploadRouter, config: { isDev: true, token: "mytoken=", }, });

[juliusmarminge]

For Fastify this caused me a few hours of headache only to realize I missed the fact that since v7 you have to pass in the dev flag when in dev like so:

app.register(createRouteHandler, { router: uploadRouter, config: { isDev: true, token: "mytoken=", }, });

the flag is and always have been inferred from NODE_ENV = development - are you experiencing different results here in v6 vs v7?

[github-actions]

This issue has been automatically marked as stale because it has not had any activity for 10 days. It will be closed in 5 days if no further activity occurs.