Frontend (Nextjs App Directory)

"use client";
 
import { useS3FileUpload } from "next-s3-uploader";
 
function UploadPage() {
  const { uploadedFiles, uploadFiles, reset } = useS3FileUpload({
    multiple: true, // Allow multiple flie uploads (optional)
    maxFiles: 10, // 10 files limit (optional)
    maxFileSize: 10 * 1024 * 1024, // 10MB limit (optional)
  });
 
  const handleFileChange = async (e) => {
    // Get selected files from input and check if length > 0 then upload files to S3
    const files = e.target.files;
    if (files && files.length > 0) {
      await uploadFiles(files);
    }
  };
 
  return (
    <div>
      <h1>File Upload to Amazon S3</h1>
      <input
        title="Upload File"
        type="file"
        accept="image/*"
        multiple
        onChange={handleFileChange}
      />
      <button onClick={reset}>Reset</button>
      {/* Display uploaded files and progress */}
      <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>
  );
}
 
export default UploadPage;