使用 Google Apps 脚本将图像上传到 GSheet - 在 HTML 服务模式对话框中传递值

Question

我正在尝试从 Google Sheet 触发文件上传，获取上传的文件，将其添加到 Google Drive 文件夹，然后 return 上传文件的 URL 并将其放在 Sheet 上的单元格中。我目前正在使用复选框触发文件上传。将复选框设置为 TRUE 后，它会弹出一个带有文件上传输入字段的对话框。这是由安装的 onEdit 函数触发的。此外，sheet 中行的信息将用于命名新上传的文件。此信息将在 sheet.

上手动输入

我到达 showModalDialog 行，对话框出现得很好，但我不知道如何将变量从原始函数传递到 HTML 服务，然后再回来（带文件）上传到Drive，设置名称，把URL放回sheet.

这是 Code.gs 中的第一个函数，从 onEdit 函数接收值：

function addFile(ss,ui,row,total) { \Triggered if edited cell is in column 25 & value is TRUE
  Logger.log('add file function');
  var name = ss.getRange(row,1).getDisplayValue();
  var date = ss.getRange(row,3).getDisplayValue();
  var filename = 'Row ' + row + ' - ' + name + ' - ' + date + ' - ' + total;
  var htmlTemp = HtmlService.createTemplateFromFile('Index');
  htmlTemp.fName = filename;
  htmlTemp.position = row;
  var html = htmlTemp.evaluate().setHeight(76).setWidth(415);
  ui.showModalDialog(html, 'Upload');
  Logger.log('end of add file function');
}

下面是 Index.html 中的内容：

<!DOCTYPE html>
<html>
  <head>
    <base target="_center">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  </head>
  <body>
  <form>
    Please upload image below.<br /><br />
    <input type="file" name="upload" id="file" accept="image/*,.pdf" />
    <input type="button" value="Submit" class="action" onclick="formData(this.parentNode)" />
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </form>
  <script>
    function formData(obj){
      var newFileName = <? fName ?>;
      var rowNum = <? position ?>;

  google.script.run.withSuccessHandler(closeIt).upload(obj,newFileName,rowNum);
    }
    function closeIt(e){
      console.log(e);
      google.script.host.close();
    };
  </script>
</body>
</html>

这里是 Code.gs 上的 return 函数：

function upload(obj,newFileName,rowNum) {
  Logger.log('upload function');
  var upFile = DriveApp.getFolderById('[folderid]').createFile(obj).setName(newFileName);
  var fileUrl = upFile.getUrl();
  Logger.log(fileUrl);
  var urlCell = SpreadsheetApp.getSheetByName('sheet name').getRange(rowNum,26);
  urlCell.setValue('=HYPERLINK("' + fileUrl + '","View image")');
}

运行这段代码，对话框出现得很好，我可以 select 上传一个文件。但是，单击“提交”按钮没有任何作用，并且该框会一直显示直到我将其删除或单击“取消”按钮。日志仅到达 'end of add file function' 并且永远不会到达 upload 函数。 google.script.run.withSuccessHandler 行应该关闭对话框，还是需要其他东西来确认/获取文件并关闭对话框？

我一直在网上搜索并找到了很多与此相关的帖子，但 none 似乎解决了这个特定问题。这几乎也是我从那些帖子中拼凑的代码的科学怪人，所以可能只是有些东西不属于那里，如果是这样的话，我深表歉意。任何帮助，将不胜感激;谢谢！

[编辑：提交按钮没有打开单独的选项卡，因为我使用的是 <input type="button"> 而不是 <button>。]

Answer 1

根据“参数和 return 值”部分中的文档 [1]，如果您要将表单对象作为参数发送，“它必须是函数的唯一参数”。因此，您应该在表单内发送参数，使用“隐藏”或“文本”类型的输入，然后，您可以从 code.gs 检索 Form 对象的输入数据。文档 [1] 中“表单”部分中的另一件事是，您需要使用 preventFormSubmit 函数禁用默认提交操作。

另一个问题是打印传递给模板的变量的正确方法是使用 <?= ?> 而不是 <? ?> ，它可以执行代码但不能打印变量。 [2]

你的addFile函数没问题。下面是我在我的环境中测试过的代码，我能够成功上传图像并在 sheet.

中打印 url

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_center">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
        <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  </head>
  <body>
  <form id="myForm">
      Please upload image below.<br /><br />
    <input type="hidden" name="fname" id="fname" value="<?= fName ?>"/>
    <input type="hidden" name="position" id="position" value="<?= position ?>"/>
    <input type="file" name="file" id="file" accept="image/jpeg,.pdf" />
    <input type="button" value="Submit" class="action" onclick="formData(this.parentNode)" />
    <input type="button" value="Close" onclick="google.script.host.close()" />
  </form>
  <script>
  //Disable the default submit action  using “func1”
   window.onload=func1;
   function func1() {
      document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();
          });  
   }

   function formData(obj){
       google.script.run.withSuccessHandler(closeIt).upload(obj);
   }   

  function closeIt(e){
      console.log(e);
      google.script.host.close();
  };   

    </script>
</body>
</html>

Code.gs（上传功能）：

function upload(obj) {
  //Retrieve the input data of the Form object.
  var newFileName = obj.fname;
  var rowNum = obj.position;
  var blob = obj.file;

  var upFile = DriveApp.getFolderById('[folderid]').createFile(blob).setName(newFileName);
  var fileUrl = upFile.getUrl();

  var urlCell = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1').getRange(rowNum,5);
  urlCell.setValue('=HYPERLINK("' + fileUrl + '","View image")');

}

[1] https://developers.google.com/apps-script/guides/html/communication

[2]https://developers.google.com/apps-script/guides/html/templates

使用 Google Apps 脚本将图像上传到 GSheet - 在 HTML 服务模式对话框中传递值

Uploading An Image With Google Apps Script To A GSheet - Passing Values To And From HTML Service Modal Dialog

html

web-applications

form-submit

google-sheets

google-apps-script