threads icon indicating copy to clipboard operation
threads copied to clipboard

UploadThing Middleware failed to run

Open saurabhbhise16 opened this issue 1 year ago • 4 comments

  • ErrorLog: event compiled client and server successfully in 318 ms (1062 modules) [UT] UploadThing dev server is now running! [UT] UploadThing dev server is now running! [UT] UploadThing dev server is now running! [UT] middleware failed to run TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11413:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { cause: ConnectTimeoutError: Connect Timeout Error at onConnectTimeout (C:\Users\Brady\Desktop\threads\node_modules\next\dist\compiled\undici\index.js:1:82152) at C:\Users\Brady\Desktop\threads\node_modules\next\dist\compiled\undici\index.js:1:81644 at Immediate._onImmediate (C:\Users\Brady\Desktop\threads\node_modules\next\dist\compiled\undici\index.js:1:82023) at process.processImmediate (node:internal/timers:476:21) at process.callbackTrampoline (node:internal/async_hooks:130:17) { code: 'UND_ERR_CONNECT_TIMEOUT' } } connected to MonogDB

import { currentUser } from "@clerk/nextjs";
import { createUploadthing, type FileRouter } from "uploadthing/next";

const f = createUploadthing();

const getUser = async () => await currentUser();

export const ourFileRouter = {
    // Define as many FileRoutes as you like, each with a unique routeSlug
    media: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
        // Set permissions and file types for this FileRoute
        .middleware(async (req) => {
            // This code runs on your server before upload
            const user = await getUser();

            // If you throw, the user will not be able to upload
            if (!user) throw new Error("Unauthorized");

            // Whatever is returned here is accessible in onUploadComplete as `metadata`
            return { userId: user.id };
        })
        .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);
        }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

I am at halfway and realised that onboarding page is showing this error and thisis my third trial

saurabhbhise16 avatar Aug 19 '23 06:08 saurabhbhise16

Please let me know if you need more details

saurabhbhise16 avatar Aug 19 '23 06:08 saurabhbhise16

hello, I think you should use const {user} = await getUser(); instead of const user = await getUser(); Let me know if it helps you.

Ahmad-Dorri avatar Sep 05 '23 08:09 Ahmad-Dorri

@saurabhbhise16 Have you properly imported the uploadthing secret keys in the .env file ? Also have a check that if you have exported the GET & POST methods in the route.ts file.

Reedam-Ranjan avatar Sep 10 '23 05:09 Reedam-Ranjan

@Reedam-Ranjan @Ahmad-Dorri thank you for interest, sure I will make changes and let you guys know

saurabhbhise16 avatar Sep 10 '23 05:09 saurabhbhise16

UploadThingError: Failed to run middleware

Environment

  • Using T3 app (create-t3-app@latest)
  • Next: 15.0.1
  • Next-auth: 5.0.0-beta.25
  • UploadThing: 7.4.1
  • @uploadthing/react: 7.1.3

Description

Encountering UploadThingError: Failed to run middleware when attempting to upload images using UploadThing with Next-auth authentication.

Code

// Current implementation /uploadthing/core.ts
import { getSession } from "next-auth/react";
import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";

const f = createUploadthing();

const isAuthorizedUser = async () => {
  const session = await getSession();
  if (
    session &&
    session.user &&
    (session.user.role === "ADMIN" || session.user.role === "COORDINATOR")
  ) {
    return {
      authorized: true,
      user: session.user,
    };
  }
  return {
    authorized: false,
    user: null,
  };
};

export const ourFileRouter = {
  imageUploader: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 6,
    },
  })
    .middleware(async () => {
      const user = await isAuthorizedUser();
      if (!user.authorized) {
        throw new UploadThingError("Unauthorized");
      }

      return { userId: user.user?.id };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log("Upload complete for userId:", metadata.userId);
      console.log("file url", file.url);
      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

Steps to Reproduce

  1. Set up Next.js project with Next-auth and UploadThing
  2. Implement image upload functionality using the code above
  3. Attempt to upload an image as an authenticated user

Expected Behavior

The middleware should successfully verify the user's authentication and allow image upload for authorized users (ADMIN or COORDINATOR).

Actual Behavior

The middleware fails with "UploadThingError: Failed to run middleware" error.

Prashant-S29 avatar Dec 26 '24 17:12 Prashant-S29