Uploadthing Has a Free API That Most Developers Dont Know About

# nextjs# upload# react# webdev
Uploadthing Has a Free API That Most Developers Dont Know AboutAlex Spinov

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

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;
Enter fullscreen mode Exit fullscreen mode

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)}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Key Features

  • Type-safe file uploads
  • Built-in React components
  • Serverless middleware
  • File validation (size, type, count)
  • Free tier: 2GB

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify or email spinov001@gmail.com for custom solutions.