TTC
Theo's Typesafe Cult•2w ago
moaz

Issue with UploadThing after updating from v5.5 to v7

Hi everyone! 👋 I recently updated UploadThing from v5.5 to v7 and followed the documentation to update my code. However, I’m encountering an issue when trying to upload an image using a custom component. Here’s my setup: Custom Component: 
"use client";

import toast from "react-hot-toast";
import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";

interface FileUploadProps {
  onChange: (url?: string) => void;
  endpoint: keyof typeof ourFileRouter;
}

export const FileUpload = ({ onChange, endpoint }: FileUploadProps) => {
  return (
    <UploadDropzone
      endpoint={endpoint}
      onClientUploadComplete={(res) => {
        onChange(res?.[0].url);
      }}
      onUploadError={(error: Error) => {
        toast.error(`${error?.message}`);
      }}
    />
  );
};
"use client";

import toast from "react-hot-toast";
import { UploadDropzone } from "@/lib/uploadthing";
import { ourFileRouter } from "@/app/api/uploadthing/core";

interface FileUploadProps {
  onChange: (url?: string) => void;
  endpoint: keyof typeof ourFileRouter;
}

export const FileUpload = ({ onChange, endpoint }: FileUploadProps) => {
  return (
    <UploadDropzone
      endpoint={endpoint}
      onClientUploadComplete={(res) => {
        onChange(res?.[0].url);
      }}
      onUploadError={(error: Error) => {
        toast.error(`${error?.message}`);
      }}
    />
  );
};
Here’s how I use it in my component: 
<FileUpload
  endpoint="courseImage"
  onChange={(url) => {
    if (url) {
      onImageUpload({ imageUrl: url });
    }
  }}
/>
<FileUpload
  endpoint="courseImage"
  onChange={(url) => {
    if (url) {
      onImageUpload({ imageUrl: url });
    }
  }}
/>
Problem When I try to upload an image: The upload button is transparent. Clicking the button triggers the following logs: 
[11:34:44.205] INFO (#19) handleUploadAction=149ms: Sending presigned URLs to client
  presignedUrls: [
    {
      url: 'https://sea1.ingest.uploadthing.com/...signature=hmac-sha256...',
      key: 'k1MsQhRnvYSyGxxxnOMth6HU1dnITJSvFYRi7g9QcKsrplyB',
      name: 'logo.webp',
      customId: null
    }
  ]
POST /api/uploadthing?actionType=upload&slug=courseImage 200 in 266ms
POST /api/uploadthing?slug=courseImage 404 in 4422ms
[11:34:44.205] INFO (#19) handleUploadAction=149ms: Sending presigned URLs to client
  presignedUrls: [
    {
      url: 'https://sea1.ingest.uploadthing.com/...signature=hmac-sha256...',
      key: 'k1MsQhRnvYSyGxxxnOMth6HU1dnITJSvFYRi7g9QcKsrplyB',
      name: 'logo.webp',
      customId: null
    }
  ]
POST /api/uploadthing?actionType=upload&slug=courseImage 200 in 266ms
POST /api/uploadthing?slug=courseImage 404 in 4422ms
It seems like there's a 404 error on the route /api/uploadthing?slug=courseImage.
1 Reply
markr
markr•2w ago
That would be an issue on your end, your api routes might be protected, or you might have placed the route handler in the wrong place/made a typo

Did you find this page helpful?