Free cloud storage for every project

Shipfileuploadsin minutes

Type-safe file routers, drop-in React components, and free cloud storage. From npm install to production in under 5 minutes.

$npm i @clawdyup/core @clawdyup/react
Get Started Dashboard

How your files flow

From component to CDN — abstracted, secured, and always available

Your App
<UploadButton />
API Route
Middleware + Auth
Clawdy
Upload + Storage
CDN
Permanent URLs

How it works

Three steps to type-safe file uploads

core.ts
import { createClawdy } from "@clawdyup/core";
const f = createClawdy();
export const uploadRouter = {
  imageUploader: f({ image: { maxFileSize: "4MB" } })
    .middleware(async ({ req }) => {
      const user = await auth(req);
      return { userId: user.id };
    })
    .onUploadComplete(({ file }) => {
      console.log("File URL:", file.url);
    }),
};

Create type-safe upload endpoints with middleware and callbacks.

Everything you need

Built for developers who want uploads to just work

Upload Infrastructure

Handles validation, storage, and CDN delivery so you can focus on your app.

UploadValidateStorageCDN

Free to Start

Generous free tier with no credit card required to get started.

Global CDN

Files served from edge locations worldwide with permanent links.

Middleware Auth

Authenticate uploads with your existing auth before files reach the CDN.

authvalidateallow

Image Transforms

Resize, crop, convert, and filter images on the fly via query params.

originaltransformed

Less code, more features

Replace boilerplate with type-safe, production-ready uploads

The old way~27 lines
const [file, setFile] = useState(null);
const [uploading, setUploading] = useState(false);
const [error, setError] = useState(null);
async function handleUpload() {
  if (!file) return;
  if (!file.type.startsWith('image/')) {
    setError('Only images allowed');
    return;
  }
  if (file.size > 4 * 1024 * 1024) {
    setError('File too large');
    return;
  }
  setUploading(true);
  const formData = new FormData();
  formData.append('file', file);
  const res = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });
  if (!res.ok) setError('Upload failed');
  setUploading(false);
}
With Clawdy12 lines
import { UploadButton } from "@/lib/clawdy";
export default function Page() {
  return (
    <UploadButton
      endpoint="imageUploader"
      onClientUploadComplete={(res) => {
        console.log("Uploaded:", res);
      }}
    />
  );
}

Ready to ship uploads?

Get started in under 5 minutes. No credit card, no limits.

$npm i @clawdyup/core @clawdyup/react
Read the docs Open Dashboard