moaz Posts - Answer Overflow

moaz

•Created by moaz on 1/11/2025 in #questions

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.

2 replies

Gaming

Programming