How to upload multiple image on aws sdk js v3?

Question

This is for single image upload :

const [img, setImg] = useState<File>(); 

<input type="file" id="file" onChange={fileChange} />

this if upload handler

const handleUpload = async () => {

// ARRAY OF IMAGES
const mediaData = new FormData();
for (var i = 0; i < file.length; i++) {
  mediaData.append('media[]', file[i]);
}



// aws-sdk upload for single image 

const path = `events/${eventDetails.id}/${img?.name}`;

const target = {
  Bucket: process.env.REACT_APP_HOST_AWS_BUCKET,
  Key: path,
  Body: img,
  ContentType: 'image/jpg',
};
const creds = {
  accessKeyId: process.env.REACT_APP_HOST_AWS_ACCESS_KEY_ID || '',
  secretAccessKey: process.env.REACT_APP_HOST_AWS_SECRET_ACCESS_KEY || '',
};
try {
  const parallelUploads3 = new Upload({
    client: new S3Client({
      region: process.env.REACT_APP_HOST_AWS_DEFAULT_REGION || '',
      credentials: creds,
    }),
    leavePartsOnError: false,
    params: target,
  });

  parallelUploads3.on('httpUploadProgress', (progress) => {
    console.log(progress);
  });

  parallelUploads3.done();
} catch (e) {
  console.log(e);
}

This is what I have done for single image upload and it works, but what I want is to upload multiple files (ARRAY OF IMAGES mediaData mentioned above), how do i achieve this? I have no idea how to achieve this without any help.

Answer 1

for uploading multiple images parallel and get upload progress

  const handleUploadImage = () => {

  for (var i = 0; i < file.length; i++) {
  const imgFile = file[i];


  const path = `folder/${file[i].name}`;

  const target = {
  Bucket: process.env.REACT_APP_HOST_AWS_BUCKET,
  Key: path,
  Body: imgFile,
  ContentType: "image/jpeg"
  };
  const creds = {
  accessKeyId: process.env.REACT_APP_HOST_AWS_ACCESS_KEY_ID || "",
  secretAccessKey:   process.env.REACT_APP_HOST_AWS_SECRET_ACCESS_KEY || ""
  };
  try {
  const parallelUploads3 = new Upload({
    client: new S3Client({
      region: process.env.REACT_APP_HOST_AWS_DEFAULT_REGION || "",
      credentials: creds
    }),
    leavePartsOnError: true,
    partSize: 1024 * 1024 * 1000,
    params: target
  });

  parallelUploads3.on("httpUploadProgress", (progress: any) => {});

  await parallelUploads3.done();
  } catch (e) {
  console.error(e);
  }
  }

}