File uploads for Remix and React Router v7

npx create-uploadkit-app my-app --template remix

pnpm add @uploadkitdev/react @uploadkitdev/core

import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';

export async function action({ request }: { request: Request }) {
  if (request.method !== 'POST') {
    return Response.json(
      { error: 'Method not allowed' },
      { status: 405, headers: { Allow: 'POST' } },
    );
  }

  const raw = await request.json().catch(() => null);
  if (!raw || typeof raw.filename !== 'string' || typeof raw.contentType !== 'string') {
    return Response.json(
      { error: 'Body must be { filename: string, contentType: string }' },
      { status: 400 },
    );
  }

  const client = new S3Client({
    region: 'auto',
    endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
    credentials: {
      accessKeyId: process.env.R2_ACCESS_KEY_ID!,
      secretAccessKey: process.env.R2_SECRET_ACCESS_KEY!,
    },
  });

  const key = `${crypto.randomUUID()}-${raw.filename}`;

  // ContentType MUST match the client's PUT header exactly — mismatch → 403.
  const url = await getSignedUrl(
    client,
    new PutObjectCommand({
      Bucket: process.env.R2_BUCKET!,
      Key: key,
      ContentType: raw.contentType,
    }),
    { expiresIn: 60 * 5 },
  );

  return Response.json({ url, key, method: 'PUT' as const });
}

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

export default function Index() {
  return (
    <UploadKitProvider endpoint="/api/sign">
      <main>
        <UploadDropzone
          onUploadComplete={(results) => {
            console.log('uploaded', results);
          }}
          onUploadError={(error) => {
            console.error('upload error', error);
          }}
        />
      </main>
    </UploadKitProvider>
  );
}

import '@uploadkitdev/react/styles.css';