Hi everyone I want to upload multiple files to Aws S3 using javascript sdk, I am using AngularJs, I have written the code for uploading single file and that's working fine but the issue I am getting is :-

1). I need to loop through all the files and upload the files one-by-one.

2). I am assigning file name to the file I upload, How will I store multiple file names to a single $scope.var.

3). I have to upload all the files first then need to call Submit function to call lambda api to submit my data as json payload. I can't call submit function in a loop how will I deal with this.

Flow :- From a form user will select multiple files click on to submit button, first upload to s3 function will get called upload all the files to s3 and I am generating the names of those files by timestamps, after uploading to s3 another api call will happen and data including all the form data + file names will be sent to that api as json payload.

My code -

if($scope.Form.$valid===true){
      AWS.config.update({
      region: "us-east-2",
      credentials: new AWS.CognitoIdentityCredentials({
      IdentityPoolId: "xxxxxx"
      })
      });
     $('#requestButton').html("Submitting..").attr('disabled',true);
     var s3 = new AWS.S3({
     apiVersion: 'xxxx-xx-xx',
     params: {Bucket: "xxxx"}
    });
    
    var files = document.getElementById('fileUpload').files;
     if(files.length == 0){
         // $scope.submitForm(data);
       }
     if (files){
      for (var i = 0; i < files.length; i++){
      var file = files[i];
      var fileName = file.name.split('.')[i]+new Date().getTime()+"."+file.name.split('.').pop();
      data.file= fileName;
      var filePath = '' + fileName;
      var fileUrl = 'https://xxxx.amazonaws.com/xxxx/' +  filePath;
      s3.upload({
      Key: filePath,
      Body: file,
      ACL: 'private'
      }, function(err, data2) {
      if(err) {
      toastr["error"]("Cannot submit your form.", "Failed!");
      $('#requestButton').val("Submit").attr('disabled',false);
      reject('error');
      console.log("FAILED")
     }
     console.log(data);
     $scope.submitForm(data);
     }).on('httpUploadProgress', function (progress) {
     var uploaded = parseInt((progress.loaded * 100) / progress.total);
     $("progress").attr('value', uploaded);
     });
     }
    }
   }
    

My question is - how can I append more names of files into data.file object and second is where should I call the submitForm() I want to call submit form function only once after uploading all the files Please help me out.