Uploading file using Google Apps Script using HtmlService

by

Have the button run the server side function using google.script.run, passing in the entire form as the only parameter. (Inside the button’s onClick, ‘this’ is the button, so ‘this.parentNode’ is the form.) Make sure to give the file input a name.

<html>
<body>
<form>
   <input type="file" name="theFile">
   <input type="hidden" name="anExample">
   <input type="button" onclick="google.script.run.serverFunc(this.parentNode)">
</form>
</body>
</html>

On the server, have your form handling function take one parameter – the form itself. The HTML form from the client code will be transformed into an equivalent JavaScript object where all named fields are string properties, except for files which will be blobs. 

function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

function serverFunc(theForm) {
   var anExampleText = theForm.anExample;  // This is a string
   var fileBlob = theForm.theFile;         // This is a Blob.
   var adoc = DocsList.createFile(fileBlob);    
   return adoc.getUrl();
}

If you actually want to use that URL you are generating and returning, be sure to add a success handler to the google.script call. You can modify it like this:

// Defined somewhere before the form
function handler(url) {
  // Do something with the url.
}

<input type="button" onclick=
  "google.script.run.withSuccessHandler(handler).serverFunc(this.parentNode)">

More Related Contents:

  1. How to use in JSF page? Single form? Multiple forms? Nested forms?
  2. Is it a good practice to use an empty URL for a HTML form’s action attribute? (action=””)
  3. Adding causes java.lang.IllegalStateException: Cannot create a session after the response has been committed
  4. Is action really required on forms?
  5. Multiple forms in a single page using flask and WTForms
  6. Angular2 – Radio Button Binding
  7. Where is my iframe in the published web application/sidebar?
  8. How to write “Html.BeginForm” in Razor
  9. Linking to another HTML page in Google Apps Script
  10. Navigating embedded Google Apps Script iFrame from the parent
  11. Nodejs POST request multipart/form-data
  12. How do you style the HTML5 form validation messages?
  13. How to download single sheet as PDF to my local device directly (not export to Google Drive)?
  14. Angular 2: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  15. Angular: composite ControlValueAccessor to implement nested form
  16. How do I communicate a page(modal dialog) with its sibling (sidebar)?
  17. How to make ‘submit’ button disabled?
  18. HTML5: Slider with two inputs possible?
  19. How to go about debugging JavaScript in the HtmlService in Google Scripts
  20. How can I conditionally require form inputs with AngularJS?
  21. Disable submit button when form invalid with AngularJS
  22. How to open a new window on form submit
  23. “function not found” error when making both GET and POST requests to a Web App
  24. Firefox keeps form data on reload
  25. Symfony2 invalid form without errors
  26. Dynamic row height in a SwiftUI form
  27. Add content of showModalDialog() to the clipboard Google Script
  28. Add span inside form’s placeholder
  29. Download file from Google Drive to local folder from Google Apps Script
  30. How to keep changed form content when leaving and going back to HTTPS page? (works with HTTP)

Leave a Comment