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

问题描述 投票:0回答:1

我是谷歌脚本世界的新手,并且发现了一些关于如何执行以下操作的很棒的教程: i 使用 HTML 表单将文件上传到 Google Drive ii 将新行追加到 google 工作表。

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

这是我正在使用的 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

对于刚接触网络编程的无知业务分析师来说,任何建议将不胜感激:/

谢谢

html forms file upload google-sheets
1个回答
0
投票

我遇到了同样的问题,通过此链接解决了我的问题:

这是谷歌脚本示例的更新,用于使用谷歌表格和宏上传文件。

  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

来自委内瑞拉的问候

注意:抱歉我的英语不好

© www.soinside.com 2019 - 2024. All rights reserved.