main_scripts.html

<script>
$( document ).ready(function() {

  var form = document.getElementById('uploadEventDataForm');
  var formInputs = {};
  var defaultEmail = document.cookie;
  if (defaultEmail && !form.email.value) {
    form.email.value = defaultEmail;
  }

  states.forEach(function(state){
    form.state.options[form.state.options.length] = new Option(state.name, state.abbreviation);
  });

  form.state.selectedIndex = 0;

  var numUploads = {};
  var fileUrls = [];
  numUploads.done = 0;
  numUploads.total = 0;

  // Upload the files into a folder in drive
  // This is set to send them all to one folder (specificed in the .gs file)
  $(form).on( "submit", iteratorFileUpload );

  function iteratorFileUpload(e) {
    e.preventDefault();

    var allFiles = document.getElementById('myFile').files;
    formData = $(form).serializeArray();

    formInputs = {};
    for (var n = 0; n < formData.length; n++){
      var inputValue = formData[n].value;
      
      if ( $(form[formData[n].name]).prop('required') && (inputValue === null || inputValue === undefined || inputValue === '') ) {
        alert('Please provide a value for ' + formData[n].name);
        return
      };

      formInputs[formData[n].name] = formData[n].value;
    }

    if (allFiles.length == 0) {
      alert('No file selected!');
    }
    else {
      //Show Progress Bar
      $('#uploadEventDataForm :submit').prop('disabled', 'disabled');

      // Scroll progress bar into view
      $('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
      
      document.cookie = form.email.value;
      numUploads.total = allFiles.length;
      $('#progressbar').progressbar({
        value : false
      });
      //.append("<div class='caption'>37%</div>");
      $(".progress-label").html('Uploading files...');

      // Send each file at a time
      for (var i = 0; i < allFiles.length; i++) {
        sendFileToDrive(allFiles[i], i);
      }
    }
  } 

  function sendFileToDrive(file, index) {
      var reader = new FileReader();
      reader.onload = function (e) {
          var content = reader.result;
          console.log('Sending ' + file.name);
          google.script.run.withSuccessHandler(updateProgressbar)
            .uploadFileToDrive(content, file.name, formInputs, index);
      }
      reader.readAsDataURL(file);
  } 

  function updateProgressbar( idUpdate ){
     console.log('Received: ' + idUpdate);
     fileUrls.push(idUpdate);
     numUploads.done++;
     var porc = Math.ceil((numUploads.done / numUploads.total)*100);
     $("#progressbar").progressbar({value: porc });
     $(".progress-label").text(numUploads.done +'/'+ numUploads.total + " Uploaded Successfully");
     if( numUploads.done == numUploads.total ){
        numUploads.done = 0;
        google.script.run.withSuccessHandler(showConfirm)
            .sendEmailConfirmation(form.email.value, fileUrls);
        
     };
  }

  function showConfirm() {
    $('#uploadEventDataForm :submit').html('Upload Complete').removeClass('btn-primary').addClass('btn-success');
    $('#confirmModal').modal({keyboard: false, backdrop: 'static', show: true});
    $('html, body').animate({ scrollTop: 0 });
  }

  function fileUploaded(status) {
    document.getElementById('uploadEventDataForm').style.display = 'none';
    document.getElementById('output').innerHTML = status;
  }

});
</script>