CODEWITHSUNDEEP
google-apps-script
Shantha Kumara
Shantha Kumara

Reputation: 3421

Unable to submit more than one file to google script web project

I have created a Google Script Web project and added a HTML form which is having multiple file input fields and a few text input fields. The form is working and submitting all the text input every time but having an issue with the file input fields.

  1. When my form is having only one file input field then all the text inputs and the file data are submitted to the server and can save the file.
  2. When my form is having two or more file input fields then all the text inputs are submitted to the server side but the file fields are having empty object which is {}

The form looks like below:

<form id="msForm">
    .......
    <input type="file" class="custom-file-input" name="certificateFile" accept="application/pdf" required >
    <input type="file" class="custom-file-input" name="otherDocuments" accept="application/pdf" required >
    .....
    <input type="button" name="next" class="next action-button" value="Submit" />
</form>

JS has the following to submit the form:

function preventFormSubmit() {
  var forms = document.querySelectorAll('form');
  for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
    });
  }
}
window.addEventListener('load', preventFormSubmit);

$(document).ready(function(){
  $(".next").click(function(){
    if($(this).val()=="Submit") {
     google.script.run
      .withSuccessHandler(successFormSubmit)
      .withFailureHandler(failedFormSubmit)
      .processForm($(this).closest("form")[0]);
    }
  });
});

The server side function in the Code.gs file:

function processForm(formObject) {
  console.log(formObject.certificateFile);
  console.log(formObject.otherDocuments);
}

Application is deploying and testing with following project settings:

Google Script Project Deployment Configuration

Post edit:
The issue has been fixed by Google in this bug reported

Upvotes: 0

Views: 126

Answers (1)

ziganotschka
ziganotschka

Reputation: 26836

This issue does seem to be a bug. While Google is looking at it, I suggest you a workaround:

  1. Only logging the bytearray server-side seems to be impacted by the bug, you can still create all files from the blobs passed on form submisison with DriveApp.createFile().
  2. If you need a server-side check to make sure the file blob is not empty, you can create in your form a hidden additional element of a type that is not "file" and use it a placeholder to send information to the serverside.

Sample:

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>     
   <form id="msForm">
    <input type="file" class="custom-file-input" name="certificateFile" accept="application/pdf" required >
    <input type="file" class="custom-file-input" name="otherDocuments" id="otherDocuments" accept="application/pdf" required >

    <input type="text" readonly="true" name="otherDocumentsName" id="otherDocumentsName" style="display: none;">
    
    <input type="button" id="submitBtn" name="next" class="next action-button" value="Submit" />
   </form>
    <script>
      
      document.getElementById('submitBtn').addEventListener('click',function(e) {
          console.log(this.parentNode)
          document.getElementById("otherDocumentsName").value = document.getElementById("otherDocuments").value;
          google.script.run.withSuccessHandler(successFormSubmit).withFailureHandler(failedFormSubmit).processForm(this.parentNode);
        })
        
        function successFormSubmit(data){
          console.log("success");
        }
        
       function failedFormSubmit(data){
          console.log("failed");
        }
       
    </script>
  </body>
</html>

code.gs

function doGet() {
  var html = HtmlService.createHtmlOutputFromFile('index');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function processForm(data){  
  var blob1 = data.certificateFile;
  var file1 = DriveApp.createFile(blob1);
  file1.setName("certificateFile");
  if (data.otherDocumentsName !== "") {
    console.log("not empty")
    var file2 = DriveApp.createFile(data.otherDocuments);
    file2.setName("otherDocuments");  
  }
  else{
    console.log("empty");
  }  
}

Upvotes: 1

Related Questions