google apps script - HTML Service - Form example doesn't work

Question

I'd really like to use a form in my app, and the official Google example doesn't work.

Passing a form as a parameter to a function, prevents the function from being called.

https://developers.google.com/apps-script/guides/html/communication#forms

Look at this line in index.html

<input type="button" value="Submit"
  onclick="google.script.run
      .withSuccessHandler(updateUrl)
      .processForm(this.parentNode)" />

See the this.parentNode parameter? Removing it allows .processForm to be called. In fact, replacing it with anything OTHER than a form, will also let processForm be called (albiet passing useless test strings).

I've tried many ways of passing the form as a parameter to processForm, all of them stop processForm from being called. If anyone has ever passed form data to a Google Script, let me know.

Answer 1

Here is a workaround I have for file upload from a form in IFRAME mode. This supports multiple files:

code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index').setSandboxMode(HtmlService.SandboxMode.IFRAME);

}

function saveFile(data,name) {

  var contentType = data.substring(5,data.indexOf(';'));
  var file = Utilities.newBlob(Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), contentType, name);
  DriveApp.getRootFolder().createFile(file);

}

index.html

<div>
 <input type="file"  id="myFiles" name="myFiles" multiple/>
 <input type="button" value="Submit" onclick="SaveFiles()" />
</div>

<script>

  var reader = new FileReader();
  var files;
  var fileCounter = 0;



  reader.onloadend = function () {
   google.script.run
    .withSuccessHandler(function(){
      fileCounter++;      
      postNextFile();
    }).saveFile(reader.result,files[fileCounter].name);

  }



function SaveFiles(){
  files = document.getElementById("myFiles").files;  
  postNextFile();
 }


function postNextFile(){if(fileCounter < files.length){reader.readAsDataURL(files[fileCounter]);}else{fileCounter=0;alert("upload done")}}

</script>