Closed kj-1809 closed 1 year ago
You can get access to the url of the file from the onUploadComplete
method:
import { createUploadthing, type FileRouter } from "uploadthing/server";
const f = createUploadthing();
const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
// 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
// Set permissions and file types for this FileRoute
.fileTypes(["image", "video"])
.maxSize("1GB")
.middleware(async (req) => {
// 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 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;
How would you get access to the URL client side?
We're adding this soon! Here's a canary if you want to try it out:
pnpm add uploadthing@3.0.2-canary.9ebcffa @uploadthing/react@3.0.2-canary.9ebcffa
See #51 for more details on how to use it!
Added, will be in next release!
how to get the url of the uploaded file in the code ?