Quickstart

You can have file uploads in your React app in a few minutes with Better Upload. This guide will walk you through the steps to set it up with any React framework.

Before you start, make sure you have an S3-compatible bucket ready. You can use AWS S3, Cloudflare R2, or any other S3-compatible service.

Multiple files

Upload more than one file at once.

Single files

Upload only a single file at once.

Uploading your first image

Install

Install the better-upload package, as well as the AWS S3 Client.

npm install better-upload @aws-sdk/client-s3

Set up server

Your server will create pre-signed URLs, which the client uses to upload files directly to the S3 bucket.

Change my-bucket to your bucket name, and configure the S3 client as needed.

app/api/upload/route.ts

import { S3Client } from '@aws-sdk/client-s3';
import {
  createUploadRouteHandler,
  route,
  type Router,
} from 'better-upload/server';

const s3 = new S3Client(); 

const router: Router = {
  client: s3,
  bucketName: 'my-bucket', 
  routes: {
    demo: route({
      fileTypes: ['image/*'],
    }),
  },
};

export const { POST } = createUploadRouteHandler(router);

In the example above, we create the upload route demo. Learn more about upload routes here.

Create `<Uploader />` component

We will now build our UI using pre-built components. We'll use <UploadButton /> for single file uploads.

Install it via the shadcn CLI:

npx shadcn@latest add "https://better-upload.com/r/upload-button.json"

We'll also use the useUploadFile hook. The complete code looks like this:

uploader.tsx

'use client'; // For Next.js

import { useUploadFile } from 'better-upload/client';
import { UploadButton } from '@/components/ui/upload-button';

export function Uploader() {
  const { control } = useUploadFile({
    route: 'demo',
  });

  return <UploadButton control={control} accept="image/*" />;
}

Learn more about the hooks here.

Place the component

Now place the <Uploader /> component in your app.

page.tsx

import { Uploader } from '@/components/uploader';

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <Uploader />
    </main>
  );
}