Usage of Next.js S3 Uploader

In this section, we'll dive deeper into how to use Next.js S3 Uploader in various scenarios and explore its features. We'll cover:

Basic File Upload

The simplest use case is to allow users to upload files to your application. We'll go through the basic steps:

Import the useS3FileUpload hook.
Use the hook in your component.
Handle file selection and initiate uploads.

Example

import { useS3FileUpload } from "next-s3-uploader";
 
function UploadPage() {
  const { uploadedFiles, uploadFiles } = useS3FileUpload();
 
  const handleFileChange = async (e) => {
    const files = e.target.files;
    if (files && files.length > 0) {
      await uploadFiles(files);
    }
  };
 
  return (
    // Your component JSX
  );
}

Allow Multiple File Uploads

To allow users to upload multiple files at once, set the multiple option to true when using the useS3FileUpload hook.

Example

const { uploadedFiles, uploadFiles } = useS3FileUpload({
  multiple: true,
});

Limit the Number of Uploaded Files

You can restrict the maximum number of files that can be uploaded using the maxFiles option.

Example

const { uploadedFiles, uploadFiles } = useS3FileUpload({
  maxFiles: 3, // Limit to 3 files
});

Set Maximum File Size

Control the maximum allowed file size for uploads with the maxFileSize option. Specify the size in bytes.

Example

const { uploadedFiles, uploadFiles } = useS3FileUpload({
  maxFileSize: 5242880, // 5MB limit
});

Use Custom Object Keys

You can specify custom object keys when uploading files. This is useful for organizing your S3 bucket.

Example

const { uploadedFiles, uploadFiles } = useS3FileUpload();
 
const handleFileChange = async (e) => {
  const files = e.target.files;
  if (files and files.length > 0) {
    const customKeys = ["file1.jpg", "images/file2.jpg", "docs/file3.pdf"];
    await uploadFiles(files, customKeys);
  }
};

Custom 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 endpoint.

Example

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");
  }
};

AWS S3 Client Configuration

If you're using AWS S3 as your storage provider, you can configure the S3 client using the createS3Client function.

Example

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
  },
});

Non-AWS S3-Compatible Client Configuration

If you're using a non-AWS S3-compatible service like MinIO, configure the client accordingly.

Example

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
  },
});

With these usage examples and configurations, you can make the most of Next.js S3 Uploader in your Next.js application.

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

GCP createS3Client