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 ca

Answer 1

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 2

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>

Answer 3

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>