UploadThing - Cant pass userId
Hey guys, my lack of knowledge is showing here 
I am trying to pass the input prop to pass my user ID but I cant use that prop since I am not really using the base UploadComponent as I followed the nextJS docs and it uses a generator. So it says input is not a valid prop, how do I fix this?
I am trying to pass the input prop to pass my user ID but I cant use that prop since I am not really using the base UploadComponent as I followed the nextJS docs and it uses a generator. So it says input is not a valid prop, how do I fix this?
/api/uploadthing/core.ts/api/uploadthing/core.tsimport { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
const f = createUploadthing();
// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
// Define as many FileRoutes as you like, each with a unique routeSlug
imageUploader: f({ image: { maxFileSize: "4MB" } })
// Set permissions and file types for this FileRoute
.middleware(async ({ req, input }) => {
try {
// This code runs on your server before upload
const userId = input.userId as string | null;
// If you throw, the user will not be able to upload
if (!userId) throw new UploadThingError("Unauthorized");
// Whatever is returned here is accessible in onUploadComplete as `metadata`
return { userId };
} catch (error) {
console.error("Middleware error:", error);
throw new UploadThingError("Internal Server 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;
export type OurFileRouter = typeof ourFileRouter;import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";
const f = createUploadthing();
// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
// Define as many FileRoutes as you like, each with a unique routeSlug
imageUploader: f({ image: { maxFileSize: "4MB" } })
// Set permissions and file types for this FileRoute
.middleware(async ({ req, input }) => {
try {
// This code runs on your server before upload
const userId = input.userId as string | null;
// If you throw, the user will not be able to upload
if (!userId) throw new UploadThingError("Unauthorized");
// Whatever is returned here is accessible in onUploadComplete as `metadata`
return { userId };
} catch (error) {
console.error("Middleware error:", error);
throw new UploadThingError("Internal Server 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;
export type OurFileRouter = typeof ourFileRouter;page.tsxpage.tsx"use client";
import { UploadButton } from "../../../util/uploadthing";
import { useEffect, useState } from "react";
export default function Home() {
const [userId, setUserId] = useState<string | null>(null);
useEffect(() => {
const fetchUserId = async () => {
const response = await fetch("/api/auth/me/id");
const data = await response.json();
setUserId(data.userId);
};
fetchUserId();
}, []);
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<UploadButton
endpoint="imageUploader"
input={{ userId }}
onClientUploadComplete={(res) => {
// Do something with the response
console.log("Files: ", res);
alert("Upload Completed");
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
/>
</main>
);
}"use client";
import { UploadButton } from "../../../util/uploadthing";
import { useEffect, useState } from "react";
export default function Home() {
const [userId, setUserId] = useState<string | null>(null);
useEffect(() => {
const fetchUserId = async () => {
const response = await fetch("/api/auth/me/id");
const data = await response.json();
setUserId(data.userId);
};
fetchUserId();
}, []);
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<UploadButton
endpoint="imageUploader"
input={{ userId }}
onClientUploadComplete={(res) => {
// Do something with the response
console.log("Files: ", res);
alert("Upload Completed");
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
/>
</main>
);
}