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

this.parentNode would not be the <form> element which is what you want to pass to .processForm(). Make sure that your input type is enclosed in a <form> tag just like in the example:

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

Answer 2

Ugh. Ok after almost posting a bug to Google, I found by searching their bug database that it's a known bug with file uploads - if your form doesn't have a file upload, the form will work.

Additionally, if you really want a file upload in your form, there is a workaround.

https://code.google.com/p/google-apps-script-issues/issues/detail?id=4610

Why they don't just knock out the file part of the form example is beyond me. It's the only thing preventing it from working and isn't necessary to demonstrate the point. Could have saved me 3 hours while trying to learn their language, thinking it was my fault the whole time.

Answer 3

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>