Uploading file using Google Apps Script using HtmlService

Question

How can I upload files to google drive? I want to create a web app using google app script - htmlservice. I don't know how to point form in html to existing google app script. I am having hard time to find a right example in google documentation.

I found hundreds of examples using UI but according to https://developers.google.com/apps-script/sunset it will be deprecated soon. Thank you in advance! Janusz

<html>
<body>
<form>
   <input type="file"/>
   <input type="button">
</form>
</body>
</html>

Script

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

function fileUploadTest()
{
   var fileBlob = e.parameter.upload;
      var adoc = DocsList.createFile(fileBlob);
      return adoc.getUrl();
}

GUI builder will be deprecated (and a few widgets in UiApp) but not UiApp itself... — Serge insas, Mar 27 '13 at 22:26
Note that the rest of UiApp is not deprecated and will continue to function. Nonetheless, we recommend that you migrate your user interfaces to Html Service, which will offer the best combination of features and support in the long term. — Janusz Chudzynski, Mar 28 '13 at 02:57

score 16 · Accepted Answer · answered Apr 03 '13 at 14:51

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)">

When I look at fileBlob it is simply 10 bytes of text - "FileUpload". Do you know what I'm missing? — Andrew Roberts, Mar 06 '19 at 19:35

score 0 · Answer 2 · answered Mar 28 '13 at 12:37

0

try: return HtmlService.createTemplateFromFile('myPage').evaluate(); More: html service reference

answered Mar 28 '13 at 12:37

user1830296

1

score 0 · Answer 3 · edited Aug 24 '19 at 05:23

I found an answer for my question.

Submit a Form using Google App Script's HtmlService

The code in the Google App Script link below is:

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}

function doPost(e) {
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  template.name = e.parameter.name;
  template.comment = e.parameter.comment;
  template.screenshot = e.parameter.screenshot;
  return template.evaluate();
}

https://script.google.com/d/1i65oG_ymE1lreHtB6WBGaPHi3oLD_-wPd5Ter1nsN7maFAWgUA9DbE4C/edit

Thanks!

Uploading file using Google Apps Script using HtmlService

3 Answers3

Linked