A React file upload library for Vite

1. Install

To start from a project, run npx create-uploadkit-app my-app --template vite. It is a pure SPA with no server code, so you still add the backend below.

npx create-uploadkit-app my-app --template vite

pnpm add @uploadkitdev/core @uploadkitdev/react

2. Add a backend endpoint

The docs show an Express handler. UploadKit also ships Hono, Fastify and Express adapters inside @uploadkitdev/next, so a Vite project can reuse the same file router on any of them. That package lists next as a peer dependency, so your package manager may print a warning on a server that does not use Next.js.

pnpm add @uploadkitdev/next hono

import { Hono } from 'hono';
import { createHonoHandler } from '@uploadkitdev/next/hono';
import { ourFileRouter } from './file-router';

const app = new Hono();

app.all(
  '/api/uploadkit/*',
  createHonoHandler({
    router: ourFileRouter,
    apiKey: process.env.UPLOADKIT_API_KEY,
  })
);

Keep UPLOADKIT_API_KEY in the server environment. Never put it in a VITE_ variable, because Vite inlines those into the browser bundle.

3. Wrap the app with the provider

import React from 'react';
import ReactDOM from 'react-dom/client';
import { UploadKitProvider } from '@uploadkitdev/react';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <UploadKitProvider endpoint="/api/uploadkit">
      <App />
    </UploadKitProvider>
  </React.StrictMode>,
);

4. Use a component

import { UploadDropzone } from '@uploadkitdev/react';

export function DocumentDropzone() {
  return (
    <UploadDropzone
      route="documentUploader"
      onUploadComplete={(files) => {
        console.log('Documents ready:', files.map((f) => f.url));
      }}
    />
  );
}

• React upload components

  UploadButton, UploadDropzone and the rest of the more than 40 components, plus a headless useUploadKit hook for a custom UI.

• Presigned direct-to-storage uploads

  Your endpoint authorises the request and the browser uploads straight to storage.

• Bring your own storage

  Run the handler yourself with a storage config for S3, R2 or MinIO, or sign presigned URLs from any backend that follows the template contract.

• File routes defined on the server

  The handler takes a file router with size limits, allowed types and callbacks. The docs note that React/Vite apps built on the core client define file routes in the dashboard, and that code-defined routes with TypeScript inference come from the Next.js adapter.

Build your own UI with the hook

Use useUploadKit when you want your own progress bar or file list instead of a prebuilt component.

import { useUploadKit } from '@uploadkitdev/react';

export function CustomUploader() {
  const { upload, progress, isUploading, result, error } = useUploadKit('imageUploader');

  const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      await upload(file);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleChange} disabled={isUploading} />
      {isUploading && <progress value={progress} max={100} />}
      {result && <p>Uploaded: <a href={result.url}>{result.name}</a></p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

For the trade-offs of signing URLs on a server, read presigned URLs vs server proxy uploads. The Remix and React Router tutorial shows the same action-plus-client pattern in a framework that has a built-in server, and the component gallery lists what you can render.

• Free

  5 GB storage, 2 GB bandwidth per month, 4 MB max file, 1,000 uploads per month, 2 projects.

• Pro — $15/mo

  100 GB storage, 200 GB bandwidth, 512 MB max file, 50,000 uploads per month, 10 projects.

• Team — $35/mo

  1 TB storage, 2 TB bandwidth, 5 GB max file, 500,000 uploads per month, 50 projects.

• Enterprise

  Custom limits. See the pricing page.