TTC
Theo's Typesafe Cult•2d ago
CodeWrangler_

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;
2 Replies
CodeWrangler_
CodeWrangler_OP•2d ago
on the client side of my app i have a handler function to upload to uploadthing using the uploadthing route: 
// Upload video to UploadThing
  const handleSubmit = async () => {
    const uniqueFileName = `${formData?.form_id}-${
      formData?.created_at
    }-${Date.now()}`;

    if (!recordedVideo) {
      toast.error("No video to upload");
      return;
    }

    try {
      const response = await fetch(recordedVideo);
      const blob = await response.blob();
      const file = new File([blob], `${uniqueFileName}.webm`, {
        type: VIDEO_FORMAT,
      });

      const uploadResult = await startUpload([file], {
        customId: uniqueFileName,
      });
      if (!uploadResult) {
        throw new Error("Upload failed");
      }

      const [res] = uploadResult;
      if (res) {
        toast.success("Thank you for your testimonial!");
        console.log("Uploaded video URL:", res.url);
      }
    } catch (error) {
      console.error("Error uploading video:", error);
      toast.error("Failed to upload video. Please try again.");
    }
  };
// Upload video to UploadThing
  const handleSubmit = async () => {
    const uniqueFileName = `${formData?.form_id}-${
      formData?.created_at
    }-${Date.now()}`;

    if (!recordedVideo) {
      toast.error("No video to upload");
      return;
    }

    try {
      const response = await fetch(recordedVideo);
      const blob = await response.blob();
      const file = new File([blob], `${uniqueFileName}.webm`, {
        type: VIDEO_FORMAT,
      });

      const uploadResult = await startUpload([file], {
        customId: uniqueFileName,
      });
      if (!uploadResult) {
        throw new Error("Upload failed");
      }

      const [res] = uploadResult;
      if (res) {
        toast.success("Thank you for your testimonial!");
        console.log("Uploaded video URL:", res.url);
      }
    } catch (error) {
      console.error("Error uploading video:", error);
      toast.error("Failed to upload video. Please try again.");
    }
  };
lyricaldevil
lyricaldevil•2d ago
Check this out - you can use the UTFiles symbol in your middleware to override the uploaded files attributes: https://docs.uploadthing.com/file-routes#middleware
File Routes - UploadThing Docs
File Routes is a core concept of UploadThing that defines what your users can upload

Did you find this page helpful?