A simpler way to handle direct file uploads.

Validate files and prepare secure direct uploads to AWS S3 or ImageKit using one TypeScript SDK.

Get started Next.js guide

See the complete upload flow

The browser asks your route handler for a secure upload target, then sends the file directly to your storage provider.

Choose and upload the file

The browser collects the selected file and sends only its name, content type, and size to your route handler. Once it receives a secure upload target, it uploads the file directly to the storage provider.

What happens here:

Sends file metadata to your API
Receives a secure upload target
Uploads the file directly to storage

UploadButton.tsx

1"use client";2
3import { useRef, useState } from "react";4
5export function UploadButton() {6  const inputRef = useRef<HTMLInputElement>(null);7  const [uploading, setUploading] = useState(false);8
9  async function uploadFile(file: File) {10    setUploading(true);11
12    try {13      const targetResponse = await fetch("/api/upload", {14        method: "POST",15        headers: {16          "Content-Type": "application/json",17        },18        body: JSON.stringify({19          filename: file.name,20          contentType: file.type,21          size: file.size,22        }),23      });24
25      if (!targetResponse.ok) {26        throw new Error("Unable to prepare upload");27      }28
29      const preparedUpload = await targetResponse.json();30      const formData = new FormData();31
32      for (const [name, value] of Object.entries(preparedUpload.fields)) {33        formData.append(name, value as string);34      }35
36      formData.append("file", file);37
38      const uploadResponse = await fetch(preparedUpload.url, {39        method: preparedUpload.method,40        headers: preparedUpload.headers,41        body: formData,42      });43
44      if (!uploadResponse.ok) {45        throw new Error("Upload failed");46      }47    } finally {48      setUploading(false);49    }50  }51
52  return (53    <>54      <input55        ref={inputRef}56        type="file"57        className="hidden"58        accept="image/png,image/jpeg"59        onChange={(event) => {60          const file = event.target.files?.[0];61
62          if (file) {63            void uploadFile(file);64          }65        }}66      />67
68      <button69        type="button"70        disabled={uploading}71        onClick={() => inputRef.current?.click()}72      >73        {uploading ? "Uploading..." : "Choose a file"}74      </button>75    </>76  );77}