Next.js S3 Uploader

Next S3 Uploader is a utility package designed to simplify file uploads in Next.js applications. With this package, you can seamlessly integrate file upload functionality, track upload progress, and generate secure pre-signed URLs for Amazon S3 and compatible services like MinIO.

Key Benefits

Effortless Integration: Quickly add file upload capabilities to your Next.js projects.
Custom Hook: Utilize the useS3FileUpload hook for easy file upload management.
Security First: Securely upload files with pre-signed URLs for Amazon S3 or MinIO.
Real-time Progress: Keep users informed with real-time upload progress tracking.
Versatile Configuration: Tailor settings for both S3 and MinIO services to suit your needs.

⚠️

This package is currently in beta and is not recommended for production use.

This is to be used in the app directory of Next.js projects. It is not intended for use in the pages directory.

Get Started

To begin using Next S3 Uploader, follow these simple installation steps:

npm i next-s3-uploader

Configuration

S3 Policy for Public Bucket

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicRead",
      "Effect": "Allow",
      "Principal": "*",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::your-bucket-name/*"]
    }
  ]
}

Usage

Next.js App Directory Frontend

app/upload/page.tsx

"use client";
 
import React from "react";
import { useS3FileUpload } from "next-s3-uploader";
 
function UploadPage() {
  const { uploadedFiles, uploadFiles } = useS3FileUpload({
    multiple: true,
    maxFiles: 10,
    maxFileSize: 10 * 1024 * 1024, // 10MB limit
  });
 
  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      await uploadFiles(files, undefined);
    }
  };
 
  return (
    <div>
      <h1>File Upload to Amazon S3</h1>
      <input
        title="Upload File"
        type="file"
        accept="image/*"
        multiple
        onChange={handleFileChange}
      />
      <div>
        {uploadedFiles.map((file, index) => (
          <div key={index}>
            <p>File Key: {file.key}</p>
            <p>Status: {file.status}</p>
            <p>Progress: {file.progress}%</p>
            <p>Time Left: {file.timeLeft || "Calculating..."}</p>
            {file.status === "success" && (
              <img src={file.url} alt={`Uploaded File ${index}`} />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

Next.js API Directory Backend

app/api/s3upload.js

import { createS3Client, generatePresignedUrls } from "next-s3-uploader";
 
export async function POST(req) {
  try {
    const { keys } = await req.json();
 
    // Configure AWS S3 client
    const s3Client = createS3Client({
      provider: "aws", // Amazon S3 provider
      region: "us-east-1", // Specify the appropriate AWS region
      credentials: {
        accessKeyId: "YOUR_ACCESS_KEY_ID", // Your AWS access key ID
        secretAccessKey: "YOUR_SECRET_ACCESS_KEY", // Your AWS secret access key
      },
    });
 
    // Generate pre-signed URLs
    const bucket = "your-bucket-name";
    const prefix = `userId/images/`;
    const urls = await generatePresignedUrls(s3Client, keys, bucket, prefix);
 
    return new Response(JSON.stringify(urls), { status: 200 });
  } catch (error) {
    console.error("Error processing the request:", error);
    return new Response("Internal Server Error", { status: 500 });
  }
}

Getting Started