Configuration

In this section, we will explore the various configuration options available for Next.js S3 Uploader. Proper configuration is crucial for seamless integration and optimal performance.

We will cover:

1. S3 Client Configuration
2. Customizing the API Endpoint
3. Access Control
4. Presigned URL Expiration

S3 Client Configuration

Before using Next.js S3 Uploader, you need to configure the S3 client based on your cloud storage provider.

• If you are using Amazon S3, the client configuration should include your AWS access key ID and secret access key. Make sure to specify the appropriate AWS region.

const s3Client = createS3Client({
  provider: "s3", // 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
  },
});

• If you are using a non-AWS S3-compatible service, like MinIO, configure the client with the service's endpoint, region, and access credentials.

const s3Client = createS3Client({
  provider: "minio", // Non-AWS S3 provider (minio/other)
  endpoint: "http://localhost:9000", // Specify the appropriate endpoint
  region: "us-east-1", // Specify the appropriate region
  forcePathStyle: true, // Required for MinIO
  credentials: {
    accessKeyId: "ROOTNAME", // Your access key
    secretAccessKey: "CHANGEME123", // Your secret key
  },
});

Ensure that you configure the client correctly based on your cloud storage provider.

Customizing the API Endpoint

By default, Next.js S3 Uploader uses /api/s3upload as the API endpoint for generating pre-signed URLs. You can specify a custom API endpoint if needed.

const { uploadedFiles, uploadFiles } = useS3FileUpload();
 
const handleFileChange = async (e) => {
  const files = e.target.files;
  if (files && files.length > 0) {
    await uploadFiles(files, null, "/api/custom-upload-route");
  }
};

Setting a custom API endpoint allows you to integrate Next.js S3 Uploader into your application's routing structure.

Access Control

Control access to your S3 bucket by defining appropriate access policies. Next.js S3 Uploader supports both public and private buckets.

• For public buckets, set a policy allowing s3:GetObject actions for the "*" principal. This allows anyone to read objects in the bucket.

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

• For private buckets, specify the privateBucket option as true when generating pre-signed URLs. This ensures that uploaded files are not publicly accessible.

const urls = await generatePresignedUrls(s3Client, keys, bucket, prefix, true);

Remember to properly configure access control policies based on your security requirements.

Presigned URL Expiration

Presigned URLs are temporary, and you can set their expiration time as needed. By default, presigned URLs expire after 1 hour (3600 seconds).

const urls = await generatePresignedUrls(
  s3Client,
  keys,
  bucket,
  prefix,
  false,
  {
    expiresIn: 1800, // Expires in 30 minutes
  }
);

Customize the expiration time to match your application's requirements.

With these configuration options, you can tailor Next.js S3 Uploader to your specific requirements and ensure it integrates seamlessly with your Next.js application.

Continue to the API section for detailed information about the package's functions and options.