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

Question

我是 google 脚本领域的新​​手，并且找到了一些很棒的教程来说明如何： i 使用 HTML 表单将文件上传到 Google Drive ii 将新行追加到 google 工作表。

基本上我正在尝试编写一个基本的 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>

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

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

来自委内瑞拉的问候

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