Uploadthing Has a Free API That Most Developers Dont Know About

#nextjs #upload #react #webdev

Uploadthing is a file upload service built for Next.js and React. Type-safe uploads with built-in components and serverless file handling.

Setup

// app/api/uploadthing/core.ts
import { createUploadthing, type FileRouter } from "uploadthing/next";

const f = createUploadthing();

export const ourFileRouter = {
  imageUploader: f({ image: { maxFileSize: "4MB", maxFileCount: 4 } })
    .middleware(async ({ req }) => {
      const user = await auth(req);
      if (!user) throw new Error("Unauthorized");
      return { userId: user.id };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      console.log("Upload by", metadata.userId);
      console.log("File URL:", file.url);
      return { url: file.url };
    }),

  documentUploader: f({ pdf: { maxFileSize: "16MB" } })
    .middleware(() => ({}))
    .onUploadComplete(({ file }) => ({ url: file.url }))
} satisfies FileRouter;

Client Component

import { UploadButton, UploadDropzone } from "@uploadthing/react";

function UploadForm() {
  return (
    <UploadButton
      endpoint="imageUploader"
      onClientUploadComplete={(res) => console.log("Files:", res)}
      onUploadError={(error) => alert(error.message)}
    />
  );
}