CodeWrangler_
TTCTheo's Typesafe Cult
•Created by CodeWrangler_ on 5/7/2025 in #questions
NextJS customId support in /api/uploadthing route
Hi everyone, I've checked the docs and I can't find the correct way to use customId values in nextjs app router.
@theo (t3.gg) what an I doing wrong?
Here is my core.ts:
// FileRouter for your app, can contain multiple FileRoutes
export const uploadRouter = {
// Define as many FileRoutes as you like, each with a unique routeSlug
// Video Uploader
videoUploader: f({
video: {
maxFileSize: "32MB",
maxFileCount: 1,
},
})
.input(z.object({ customId: z.string() }))
.middleware(async ({ req, input }) => {
// This code runs on your server before upload
const user = await auth(req);
// If you throw, the user will not be able to upload
if (!user) throw new UploadThingError("Unauthorized");
// Whatever is returned here is accessible in onUploadComplete as `metadata`
return { userId: user.id, customId: input.customId };
})
.onUploadComplete(async ({ metadata, file }) => {
// This code RUNS ON YOUR SERVER after upload
console.log("Upload complete for userId:", metadata.userId);
console.log("file url (ufsUrl):", file.ufsUrl);
console.log("customId:", metadata.customId);
return {
uploadedBy: metadata.userId,
customId: metadata.customId,
fileUrl: file.ufsUrl,
};
})
,
} satisfies FileRouter;
export type UploadRouter = typeof uploadRouter;
// FileRouter for your app, can contain multiple FileRoutes
export const uploadRouter = {
// Define as many FileRoutes as you like, each with a unique routeSlug
// Video Uploader
videoUploader: f({
video: {
maxFileSize: "32MB",
maxFileCount: 1,
},
})
.input(z.object({ customId: z.string() }))
.middleware(async ({ req, input }) => {
// This code runs on your server before upload
const user = await auth(req);
// If you throw, the user will not be able to upload
if (!user) throw new UploadThingError("Unauthorized");
// Whatever is returned here is accessible in onUploadComplete as `metadata`
return { userId: user.id, customId: input.customId };
})
.onUploadComplete(async ({ metadata, file }) => {
// This code RUNS ON YOUR SERVER after upload
console.log("Upload complete for userId:", metadata.userId);
console.log("file url (ufsUrl):", file.ufsUrl);
console.log("customId:", metadata.customId);
return {
uploadedBy: metadata.userId,
customId: metadata.customId,
fileUrl: file.ufsUrl,
};
})
,
} satisfies FileRouter;
export type UploadRouter = typeof uploadRouter;
3 replies