HTML 表单文件上传到 Google Drive 并将 URL 保存到 google sheet

Question

我是谷歌脚本世界的新手，并且找到了一些关于如何使用的很棒的教程： i 使用 HTML 表单将文件上传到 Google Drive ii 将新行附加到谷歌工作表。

本质上，我正在尝试编写一个基本的 HTML 表单，该表单收集了一些文本字段和文件附件，其中文件附件上传到我的谷歌驱动器，并且 URL 与其他表单文本字段一起附加了一个谷歌表格。

这是我正在使用的 HTML 表单（基于我找到的教程）：

<!-- Include the Google CSS package -->
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<!-- You can also include your own CSS styles -->
<style>
  form { margin: 40px auto; }
  input { display:inline-block; margin: 20px; }
</style>

<script>

  // The function will be called after the form is submitted
  function uploadFile() {
    document.getElementById('uploadFile').value = "Uploading File..";
    google.script.run
       .withSuccessHandler(fileUploaded)
       .uploadFiles(document.getElementById("labnol"));
    return false;
  }

  // This function will be called after the Google Script has executed
  function fileUploaded(status) {
    document.getElementById('labnol').style.display = 'none';
    document.getElementById('output').innerHTML = status;
  }

</script>

<!-- This is the HTML form -->
<form id="labnol">

  <!-- Text input fields -->
  <input type="text" id="nameField" name="myName" placeholder="Your name..">
  <input type="email" id="emailField" name="myEmail" placeholder="Your email..">

  <!-- File input filed -->
  <input type="file" name="myFile">

  <!-- The submit button. It calls the server side function uploadfiles() on click -->
  <input type="submit" id="uploadFile" value="Upload File"
         onclick="this.value='Uploading..';uploadFile();">

</form>

<!-- Here the results of the form submission will be displayed -->
<div id="output"></div>

这是谷歌脚本（同样，基于博客上的有用教程）

/* The script is deployed as a web app and renders the form */
function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html')
            .setSandboxMode(HtmlService.SandboxMode.NATIVE);
  // This is important as file upload fail in IFRAME Sandbox mode.
}

/* This function will process the submitted form */
function uploadFiles(form) {

  try {

    /* Name of the Drive folder where the files should be saved */
    var dropbox = "Test Form Submissions";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    /* Find the folder, create if the folder does not exist */
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    } 

    /* Get the file uploaded though the form as a blob */
    var blob = form.myFile;
    var file = folder.createFile(blob);

    //Allocate variables for submissions in sheet
    var namerecord = form.myName;
    var emailrecord = form.myEmail;

    /* Set the file description as the name of the uploader */
    file.setDescription("Uploaded by " + form.myName);

    /* Return the download URL of the file once its on Google Drive */
    return "File uploaded successfully " + file.getUrl();

    var uploadURL = file.getUrl();


  //

  } catch (error) {

    /* If there's an error, show the error message */
    return error.toString();
  }

        //Open spreadsheet based on URL
  var googsheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/17fuu1vUuxgCgs1TpSGpWDNxMHX3AEFscmjX156HQ5_U/edit?usp=sharing');
  Logger.log(googsheet.getName());

  var sheet = googsheet.getSheets()[0];
  sheet.appendRow(["James", "jim", "abc"]);



}

我的直觉是简单地插入一些代码行以将表单数据添加到指定的工作表中，但它不起作用，我一定做错了什么：S

对于网络编程新手的无知业务分析师，任何建议将不胜感激：/

谢谢

Answer 1

我有同样的问题，通过这个链接解决了我的问题：

这是来自谷歌脚本示例的更新，用于上传带有谷歌表格和宏的文件。

1. 在 HTML 中定义提交按钮的行中，将id="uploadFile"更改为id="uploadFileButton" （提交按钮的 id 和函数uploadFile()之间可能存在冲突）

2. 并通过添加额外的 return false 来更改 onclick 触发器： onclick="this.value='Uploading..';uploadFile();return false;"

3. 相应地，在定义uploadFile()函数的代码中，改变

   document.getElementById('uploadFile').value = "Uploading File..";

   至

   document.getElementById('uploadFileButton').value = "Uploading File..";

完整的线程链接： https ://code.google.com/p/google-apps-script-issues/issues/detail?id=6177

来自委内瑞拉的问候

注意：对不起我的英语不好