AWS SDK S3 - File uploads, downloads, and presigned URLs with S3 in Next.js

npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner

// lib/s3.ts
import { S3Client } from "@aws-sdk/client-s3";
 
export const s3Client = new S3Client({
  region: process.env.AWS_REGION!,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
  },
});

// app/api/upload/route.ts
import { PutObjectCommand } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { s3Client } from "@/lib/s3";
 
export async function POST(req: Request) {
  const { filename, contentType } = await req.json();
 
  const command = new PutObjectCommand({
    Bucket: process.env.S3_BUCKET_NAME!,
    Key: `uploads/${Date.now()}-${filename}`,
    ContentType: contentType,
  });
 
  const url = await getSignedUrl(s3Client, command, { expiresIn: 600 });
  return Response.json({ url });
}

// app/components/FileUploader.tsx
"use client";
import { useState, useRef } from "react";
 
export default function FileUploader() {
  const [uploading, setUploading] = useState(false);
  const [uploadedUrl, setUploadedUrl] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
 
  async function handleUpload() {
    const file = fileInputRef.current?.files?.[0];
    if (!file) return;
 
    setUploading(true);
    try {
      // Step 1: Get presigned URL from our API
      const res = await fetch("/api/upload", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          filename: file.name,
          contentType: file.type,
        }),
      });
      const { url } = await res.json();
 
      // Step 2: Upload directly to S3 using the presigned URL
      await fetch(url, {
        method: "PUT",
        headers: { "Content-Type": file.type },
        body: file,
      });
 
      // Extract the permanent URL (without query params)
      const permanentUrl = url.split("?")[0];
      setUploadedUrl(permanentUrl);
    } catch (error) {
      console.error("Upload failed:", error);
    } finally {
      setUploading(false);
    }
  }
 
  return (
    <div className="p-6 max-w-md mx-auto space-y-4">
      <div>
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*,.pdf,.doc,.docx"
          className="block w-full text-sm"
        />
      </div>
      <button
        onClick={handleUpload}
        disabled={uploading}
        className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
      >
        {uploading ? "Uploading..." : "Upload"}
      </button>
      {uploadedUrl && (
        <p className="text-sm text-green-600">
          Uploaded: <a href={uploadedUrl} className="underline">View file</a>
        </p>
      )}
    </div>
  );
}

// app/actions/s3-actions.ts
"use server";
import {
  ListObjectsV2Command,
  GetObjectCommand,
  DeleteObjectCommand,
} from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
import { s3Client } from "@/lib/s3";
 
const BUCKET = process.env.S3_BUCKET_NAME!;
 
export async function listFiles(prefix: string = "uploads/") {
  const command = new ListObjectsV2Command({
    Bucket: BUCKET,
    Prefix: prefix,
    MaxKeys: 50,
  });
 
  const response = await s3Client.send(command);
  return (
    response.Contents?.map((item) => ({
      key: item.Key!,
      size: item.Size!,
      lastModified: item.LastModified!.toISOString(),
    })) ?? []
  );
}
 
export async function getDownloadUrl(key: string) {
  const command = new GetObjectCommand({
    Bucket: BUCKET,
    Key: key,
  });
  return getSignedUrl(s3Client, command, { expiresIn: 3600 });
}
 
export async function deleteFile(key: string) {
  const command = new DeleteObjectCommand({
    Bucket: BUCKET,
    Key: key,
  });
  await s3Client.send(command);
}

"use server";
import { PutObjectCommand } from "@aws-sdk/client-s3";
import { s3Client } from "@/lib/s3";
 
export async function uploadFile(formData: FormData) {
  const file = formData.get("file") as File;
  const buffer = Buffer.from(await file.arrayBuffer());
 
  const command = new PutObjectCommand({
    Bucket: process.env.S3_BUCKET_NAME!,
    Key: `uploads/${Date.now()}-${file.name}`,
    Body: buffer,
    ContentType: file.type,
  });
 
  await s3Client.send(command);
}

// app/api/download/[key]/route.ts
import { GetObjectCommand } from "@aws-sdk/client-s3";
import { s3Client } from "@/lib/s3";
 
export async function GET(
  req: Request,
  { params }: { params: { key: string } }
) {
  const command = new GetObjectCommand({
    Bucket: process.env.S3_BUCKET_NAME!,
    Key: decodeURIComponent(params.key),
  });
 
  const response = await s3Client.send(command);
  const stream = response.Body as ReadableStream;
 
  return new Response(stream, {
    headers: {
      "Content-Type": response.ContentType ?? "application/octet-stream",
      "Content-Length": String(response.ContentLength),
    },
  });
}

import { CopyObjectCommand } from "@aws-sdk/client-s3";
 
const command = new CopyObjectCommand({
  Bucket: "destination-bucket",
  CopySource: "source-bucket/path/to/file.pdf",
  Key: "new-path/file.pdf",
});
 
await s3Client.send(command);

import type {
  PutObjectCommandInput,
  ListObjectsV2CommandOutput,
} from "@aws-sdk/client-s3";
 
const params: PutObjectCommandInput = {
  Bucket: "my-bucket",
  Key: "file.txt",
  Body: "Hello, World!",
};