Google表单文件上传完整示例 [英] Google Forms file upload complete example

问题描述

如何让我的观看者使用Google表单将一些文件上传到我的表单并将其保存到我的Google云端硬盘？

我正在寻找一个完整的示例：它必须告诉代码添加到示例Google Form HTML源代码。如何使用Google Apps脚本将查看者的文件上传到我的Google云端硬盘帐户？

解决方案

此解决方案不使用Google表单。这是一个使用Apps脚本Web应用程序的示例，它与Google表单非常不同。一个Web应用程序基本上是一个网站，但你不能得到一个域名。这不是对Google表单的修改，无法上传文件。

$ b 注意：我确实有一个例子 UI服务和HTML服务，但已经删除了UI服务示例，因为UI服务已被弃用。

：唯一可用的沙箱设置现在是 IFRAME 。我想在开头的form标签中使用 onsubmit 属性：< form onsubmit =myFunctionName（）>



如果使用提交类型按钮，并且想要继续要使用它，你可以在submit事件处理函数中添加 event.preventDefault（）; 到你的代码中。或者您需要使用 google.script.run 客户端API。



---

可以使用Apps脚本HTML服务创建用于将用户计算机驱动器中的文件上传到Google云端硬盘的自定义表单。这个例子需要编写一个程序，但是我已经提供了所有的基本代码。

这个例子显示了一个带有Google Apps脚本HTML服务的上传表单。

您需要什么

• Google帐户


• Google Drive


• Google Apps脚本 - 也称为Google脚本

Google Apps脚本

Google Apps脚本代码有多种方式编辑。

• 直接从网址加载应用程序脚本： https://script.google.com


• 首先打开Goog​​le表格，然后打开Apps脚本


• 转到您的Google云端硬盘，然后打开应用脚本： https://drive.google.com/drive/ ＃my-drive


• 转到您的Google云端硬盘，然后点击Apps脚本项目文件


• etc

我提到这个是因为如果你没有意识到所有的可能性，可能有点混乱。 Google Apps脚本可以嵌入Google网站，表格，文档或表单中，也可以作为独立应用使用。 .google.com / apps-script / overviewrel =nofollow noreferrer> Apps脚本概述

这个例子是一个独立 HTML服务。

HTML服务 - 使用HTML，CSS和Javascript创建网络应用程序

在项目中有两类文件：


脚本文件有一个 .gs 延期。 .gs 代码是用JavaScript编写的服务器端代码，也是Google自己的API的组合。
$ b

• 复制并粘贴以下代码
  
• 保存


• 创建第一个命名的版本


• 发布它$
  





开始：






• 在Apps脚本中创建一个新的空白项目


• 复制并粘贴以下代码：
  




使用HTML服务上传文件： b


Code.gs 文件（由默认创建）

  //为此，您需要一个名为
的Google驱动器中的文件夹//'For Web Hosting'
 //或将硬编码的文件夹名称更改为文件夹的名称
 //您要将文件写入
 
函数doGet（e ）{
 return HtmlService.createTemplateFromFile（'Form'）
 .evaluate（）//在设置Sandbox模式之前，必须先进行评估
 .setTitle（'Name to Appear in Browser Tab'）
 .setSandboxMode（）; //默认为IFRAME，现在是唯一可用的模式
 
 $ b函数processForm（theForm）{
 var fileBlob = theForm.picToLoad; 
 
 Logger.log（fileBlob Name：+ fileBlob.getName（））
 Logger.log（fileBlob type：+ fileBlob.getContentType（））
 Logger。日志（'fileBlob：'+ fileBlob）; 
 
 var fldrSssn = DriveApp.getFolderById（您的文件夹ID）; 
 fldrSssn.createFile（fileBlob）; 
 
返回true; 
 
  

创建一个html文件： / strong>



 <！DOCTYPE html> 
< html> 
< head> 
< base target =_ top> 
< / head> 
< body> 
< h1 id =主标题>主标题< / h1> 
< br /> 
< div id =formDiv> 
 
< form id =myForm> 
 
< input name =picToLoadtype =file/>< br /> 
< input type =buttonvalue =Submitonclick =picUploadJs（this.parentNode）/> 
 
< / form> 
< / div> 
 
 
< div id =statusstyle =display：none>表单提交后，
<！ -  div将填充innerHTML。 - > 
正在上传。请稍等... 
< / div> 
 
< / body> 
< script> 
 
函数picUploadJs（frmData）{
 
 document.getElementById（'status'）。style.display ='inline'; 
 
 google.script.run 
 .withSuccessHandler（updateOutput）
 .processForm（frmData）
}; 
 //通过submit按钮处理程序调用Javascript函数，
 //显示结果。 
 
 function updateOutput（）{
 
 var outputDiv = document.getElementById（'status'）; 
 outputDiv.innerHTML =档案已上载！ 
} 
 
< / script> 
< / html> 
  

这是一个完整的工作示例。它只有两个按钮和一个< div> 元素，所以在屏幕上看不到太多东西。如果 .gs 脚本成功，则返回true，并运行 onSuccess 函数。 onSuccess函数（updateOutput）将内部HTML注入到 div 元素中，并显示消息The File was UPLOADED！。



<使用菜单： File ，<$>


保存文件，为项目命名c $ c>管理版本然后保存第一个版本




发布，部署为Web应用程序然后更新

第一次运行脚本时，因为它将文件保存到您的驱动器。第一次授予权限后，Apps脚本将停止，并且不会完成运行。所以，你需要再次运行它。脚本不会在第一次后再次请求权限。

Apps脚本文件将显示在您的Google云端硬盘中。在Google云端硬盘中，您可以设置谁可以访问和使用该脚本的权限。该脚本通过简单地向用户提供链接来运行。使用链接就像加载网页一样。

另一个使用HTML服务的例子可以在StackOverflow的这个链接看到：

使用HTML服务上传文件

有关不推荐的UI服务的注意事项：

UI服务和电子表格类（或其他类）的Ui getUi（）方法之间的区别应用程序脚本UI服务已于2014年12月11日弃用。它会继续工作一段时间，但鼓励您使用HTML服务。

Google文档 - UI服务

$ b 即使UI服务不推荐使用电子表格类的 getUi（）方法来添加 强>自定义菜单，这是 不 不推荐使用： //developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app#getUi（）rel =nofollow noreferrer>电子表格类 - 获取UI方法

我之所以提到这一点是因为它们可能会引起混淆，因为它们都使用了术语 UI 。

UI方法返回一个 Ui 返回类型

您可以将HTML添加到UI服务，但不能使用< button> ，< input> 或< script>使用UI服务标记HTML。

以下是使用输入表单的共享Apps Script Web App文件的链接：

共享文件 - 联系表

How do I allow my viewers to use Google Forms to upload some files to my form and save it to my Google Drive?

I am looking for a complete example: It must tell what code to add to the example Google Form HTML source. How to use Google Apps Script to upload the viewer's file to my Google Drive account?

解决方案

This solution does not use Google Forms. This is an example of using an Apps Script Web App, which is very different than a Google Form. A Web App is basically a website, but you can't get a domain name for it. This is not a modification of a Google Form, which can't be done to upload a file.

NOTE: I did have an example of both the UI Service and HTML Service, but have removed the UI Service example, because the UI Service is deprecated.

NOTE: The only sandbox setting available is now IFRAME. I you want to use an onsubmit attribute in the beginning form tag: <form onsubmit="myFunctionName()">, it may cause the form to disappear from the screen after the form submission.

If you were using NATIVE mode, your file upload Web App may no longer be working. With NATIVE mode, a form submission would not invoke the default behavior of the page disappearing from the screen. If you were using NATIVE mode, and your file upload form is no longer working, then you may be using a "submit" type button. I'm guessing that you may also be using the "google.script.run" client side API to send data to the server. If you want the page to disappear from the screen after a form submission, you could do that another way. But you may not care, or even prefer to have the page stay on the screen. Depending upon what you want, you'll need to configure the settings and code a certain way.

If you are using a "submit" type button, and want to continue to use it, you can try adding event.preventDefault(); to your code in the submit event handler function. Or you'll need to use the google.script.run client side API.

---

A custom form for uploading files from a users computer drive, to your Google Drive can be created with the Apps Script HTML Service. This example requires writing a program, but I've provide all the basic code here.

This example shows an upload form with Google Apps Script HTML Service.

What You Need

• Google Account
• Google Drive
• Google Apps Script - also called Google Script

Google Apps Script

There are various ways to end up at the Google Apps Script code editor.

• Load Apps Script directly from the web address: https://script.google.com
• Open a Google Sheet first, then open Apps Script
• Go to your Google Drive, then Open Apps Script: https://drive.google.com/drive/#my-drive
• Go to your Google Drive, then click on an Apps Script project file
• Open Apps Script from Google Docs
• etc

I mention this because if you are not aware of all the possibilities, it could be a little confusing. Google Apps Script can be embedded in a Google Site, Sheets, Docs or Forms, or used as a stand alone app.

Apps Script Overview

This example is a "Stand Alone" app with HTML Service.

HTML Service - Create a web app using HTML, CSS and Javascript

Google Apps Script only has two types of files inside of a Project:

• Script
• HTML

Script files have a .gs extension. The .gs code is a server side code written in JavaScript, and a combination of Google's own API.

• Copy and Paste the following code
• Save It
• Create the first Named Version
• Publish it

• Set the Permissions

  and you can start using it.

Start by:

• Create a new Blank Project in Apps Script
• Copy and Paste in this code:

Upload a file with HTML Service:

Code.gs file (Created by Default)

//For this to work, you need a folder in your Google drive named:
// 'For Web Hosting'
// or change the hard coded folder name to the name of the folder
// you want the file written to

function doGet(e) {
  return HtmlService.createTemplateFromFile('Form')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    .setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById(Your Folder ID);
    fldrSssn.createFile(fileBlob);

  return true;
}

Create an html file:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1 id="main-heading">Main Heading</h1>
    <br/>
    <div id="formDiv">

      <form id="myForm">

        <input name="picToLoad" type="file" /><br/>
        <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />

      </form>
    </div>


  <div id="status" style="display: none">
  <!-- div will be filled with innerHTML after form submission. -->
  Uploading. Please wait...
</div>

</body>
<script>

function picUploadJs(frmData) {

  document.getElementById('status').style.display = 'inline';

  google.script.run
    .withSuccessHandler(updateOutput)
    .processForm(frmData)
};
  // Javascript function called by "submit" button handler,
  // to show results.

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
  }

</script>
</html>

This is a full working example. It only has two buttons and one <div> element, so you won't see much on the screen. If the .gs script is successful, true is returned, and an onSuccess function runs. The onSuccess function (updateOutput) injects inner HTML into the div element with the message, "The File was UPLOADED!"

• Save the file, give the project a name
• Using the menu: File, Manage Version then Save the first Version
• Publish, Deploy As Web App then Update

When you run the Script the first time, it will ask for permissions because it's saving files to your drive. After you grant permissions that first time, the Apps Script stops, and won't complete running. So, you need to run it again. The script won't ask for permissions again after the first time.

The Apps Script file will show up in your Google Drive. In Google Drive you can set permissions for who can access and use the script. The script is run by simply providing the link to the user. Use the link just as you would load a web page.

Another example of using the HTML Service can be seen at this link here on StackOverflow:

File Upload with HTML Service

NOTES about deprecated UI Service:

There is a difference between the UI Service, and the Ui getUi() method of the Spreadsheet Class (Or other class) The Apps Script UI Service was deprecated on Dec. 11, 2014. It will continue to work for some period of time, but you are encouraged to use the HTML Service.

Google Documentation - UI Service

Even though the UI Service is deprecated, there is a getUi() method of the spreadsheet class to add custom menus, which is NOT deprecated:

Spreadsheet Class - Get UI method

I mention this because it could be confusing because they both use the terminology UI.

The UI method returns a Ui return type.

You can add HTML to a UI Service, but you can't use a <button>, <input> or <script> tag in the HTML with the UI Service.

Here is a link to a shared Apps Script Web App file with an input form:

Shared File - Contact Form

这篇关于Google表单文件上传完整示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！