Next S3 Upload

Tracking progress

The useS3Upload hook provides a files array that holds the upload progress for all of the uploaded files.

The progress is a number between 0 and 100 that will continuously update as a file is being uploaded.

The example below shows how to make a UI that lists files and their progress.

import { useS3Upload } from "next-s3-upload";
import { useState } from "react";

export default function UploadPage() {
  let { uploadToS3, files } = useS3Upload();

  let handleFileChange = async event => {
    let file = event.target.files[0];
    await uploadToS3(file);
  };

  return (
    <div>
      <input onChange={handleFileChange} type="file" />

      <div className="pt-8">
        {files.map((file, index) => (
          <div key={index}>
            File #{index} progress: {file.progress}%
          </div>
        ))}
      </div>
    </div>
  );
}