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 =[0];
    await uploadToS3(file);

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

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