使用 HtmlService 使用 Google Apps 脚本上传文件答案

【问题标题】：Uploading file using Google Apps Script using HtmlService使用 HtmlService 使用 Google Apps 脚本上传文件
【发布时间】：2013-03-18 05:10:07
【问题描述】：

如何将文件上传到 Google Drive？我想使用谷歌应用脚本 - htmlservice 创建一个网络应用。我不知道如何将 html 中的表单指向现有的 google app 脚本。我很难在谷歌文档中找到一个正确的例子。

我发现了数百个使用 UI 的示例，但根据 https://developers.google.com/apps-script/sunset，它很快就会被弃用。先感谢您！亚努斯

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

脚本

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

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

【问题讨论】：

GUI builder 将被弃用（以及 UiApp 中的一些小部件），但 UiApp 本身不会......
请注意，UiApp 的其余部分并未弃用，将继续运行。尽管如此，我们还是建议您将您的用户界面迁移到 Html 服务，从长远来看，这将提供功能和支持的最佳组合。

标签： forms google-apps-script web-applications

【解决方案1】：

我找到了问题的答案。

Submit a Form using Google App Script's HtmlService

下面的 Google App Script 链接中的代码是：

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

谢谢！

【讨论】：

【解决方案2】：

让按钮使用 google.script.run 运行服务器端函数，将整个表单作为唯一参数传递。（在按钮的 onClick 内部，'this' 是按钮，所以 'this.parentNode' 是表单。）确保为文件输入命名。

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

在服务器上，让您的表单处理函数采用一个参数 - 表单本身。来自客户端代码的 HTML 表单将被转换为一个等效的 JavaScript 对象，其中所有命名字段都是字符串属性，除了将是 blob 的文件。

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();
}

如果您确实想使用您正在生成和返回的 URL，请务必在 google.script 调用中添加成功处理程序。你可以这样修改：

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

【讨论】：

当我查看 fileBlob 时，它只是 10 个字节的文本 - “FileUpload”。你知道我错过了什么吗？

【解决方案3】：

尝试：返回 HtmlService.createTemplateFromFile('myPage').evaluate(); 更多：html service reference

【讨论】：