Upload Thing reusable client component

uploader.tsx

"use client";

import { useState } from "react";
import { generateReactHelpers } from "@uploadthing/react";
import type { OurFileRouter } from "@/app/api/uploadthing/core";

export const { uploadFiles } = generateReactHelpers<OurFileRouter>();

interface FormData {
  name: string;
}

interface UploadImageProps {
  onUploadComplete: (url: string, formData: FormData) => void;
  onUploadError: (error: Error) => void;
}

export function useUploadImage({
  onUploadComplete,
  onUploadError,
}: UploadImageProps) {
  const [uploading, setUploading] = useState(false);

  const handleUpload = async (file: File, formData: FormData) => {
    try {
      setUploading(true);
      const [res] = await uploadFiles(
        (routeRegistry) => routeRegistry.imageUploader,
        { files: [file] }
      );
      onUploadComplete(res.url, formData);
    } catch (err) {
      onUploadError(err as Error);
    } finally {
      setUploading(false);
    }
  };

  return { handleUpload, uploading };
}