Google Apps脚本文件上传（通过HTML表单）仅在脚本被“绑定”时才有效（测试独立脚本时，HTTP 403错误）

Question

要将本地文件上传到Google云端硬盘，我有一个HTML <form></form> （请参见下面的代码），该HTML <form></form>显示在用户打开的Google表格的模式上方。 HTML表单中包含<input type="file" name="..."> ，并且当我单击发送表单对象时，如果此Google Apps脚本已“绑定”到特定的表格，则可以成功上传文件文件（并使用“ Tools > Script Editor...菜单Tools > Script Editor... ）。

如果我将脚本另存为独立脚本，然后在我选择的Sheets文件上对其进行了测试（安装和启用），则<form>的onclick动作和尝试调用google.script.run.aServerFunction(...)导致"NetworkError: Connection failure due to HTTP 403" 。 为了澄清这一点，我的意思是创建一个独立的脚本并在Sheets文件上对其进行测试： https : //developers.google.com/apps-script/add-ons/#understand_the_development_cycle 。 在早期的代码迭代中，我还选择了某种授权scriptError。 私下发布脚本供测试人员在工作表上使用时，会发生相同的错误。 不幸的是，我想我需要它作为一个独立的脚本，以后可以作为附件发布，而不是使用“ Tools > Script Editor...菜单绑定到单个工作表的附带脚本。

我在Stack Overflow上的第一篇文章-请原谅任何术语或排版错误，谢谢！

从教程改编的HTML：

    <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
        function failed(event) {
          $("div.response").text(event);
          //google.script.run.selectStuff();
          //google.script.host.close();
        }
      </script>
  </head>
  <body>
    <form id="myForm">

    <label>Your Name</label>
    <input type="text" name="myName">

    <label>Pick a file</label>
    <input type="file" name="myFile">

    <input type="submit" value="Upload File" 
               onclick="google.script.run.withFailureHandler(failed)
                        .uploadFiles(this.parentNode);
                        return false;">
</form>
<div class="response"></div>
  </body>

</html>

在code.gs中：

function uploadFiles(formObject) {
  /*var sheet1 = SpreadsheetApp.getActiveSheet();
  sheet1.setActiveRange(sheet1.getRange(2, 2, 4, 4));

  var formBlob = formObject.myFile;
  var driveFile = DriveApp.createFile(formBlob);
  driveFile.addEditor("...");
  SpreadsheetApp.getActive().toast(driveFile.getUrl());
  sheet1.getRange(1,1,1,1).setValue(driveFile.getUrl());
  return driveFile.getUrl();*/

  return "it worked";
}

Answer 1

我相信您收到HTTP 403错误的原因是，表单DOM元素是表单插件中google.script.run.myfunction（...）中的非法参数。 即使他们在这里提到的法律参数在这里，我想附加有不能够通过任何类型的DOM元素的添加限制。

我想出的解决方案是使用本机javascript中的Filereader.readAsDataUrl（）函数将上传的文件转换为base64编码的字符串，并将字符串传递给google脚本，然后将其转换回要上传到google驱动器的文件。 base64编码字符串如下所示开始：

数据：应用/ PDF; BASE64，JVBERi0xLjMKJcTl8uXrp / Og0MTG ....

加油站

function uploadFiles(formObject) {
  // extract contentType from the encoded string 
  var contentType = formObject.split(",")[0].split(";")[0].split(":")[1]
  // New Blob(data,contentType,name)
  // Use base64decode to get file data
  var blob = Utilities.newBlob(Utilities.base64Decode(formObject.split(",")[1]), contentType, "trial")
  var driveFile = DriveApp.getFolderById("your Folder ID here").createFile(blob);
  //return contentType, can be anything you like
  return blob.getContentType()
}

HTML脚本

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>

  </head>
  <body>
    <form id="myForm">

    <label>Your Name</label>
    <input type="text" name="myName">

    <label>Pick a file</label>
    <input type="file" id = "filemy" name="myFile">

    <input type="button" value="Upload File" 
               onclick="upload(this.parentNode)">
</form>
<div class="response"></div>
  </body>
  <script>
        function failed(event) {
          $("div.response").text(event);
          //google.script.run.selectStuff();
          //google.script.host.close();
        }

        function upload(frmData){
        var file = document.getElementById("filemy").files[0]
        var reader = new FileReader()
        //reader.onload is triggered when readAsDataURL is has finished encoding
        //This will take a bit of time, so be patient
        reader.onload = function(event) {
        // The file's text will be printed here
        console.log("File being Uploaded")
        //console.log(event.target.result)
        google.script.run.withFailureHandler(failed).withSuccessHandler(failed)
                        .uploadFiles(event.target.result);
        };

        reader.readAsDataURL(file);
        console.log(reader.result)
        }
      </script>

</html>

最后说明：我尚未对代码进行广泛的测试，我已经将其用于pdf文件和maximun大小为2.6MB的image / png文件。 因此，在尝试其他文件类型之前，请尝试使用这两种文件类型！ 另外，文件确实需要一段时间才能上传，因此请耐心等待（〜5-10秒）。 特别是因为没有进度条来显示上传进度，所以感觉好像什么也没发生。

希望有帮助！

Google Apps脚本文件上传（通过HTML表单）仅在脚本被“绑定”时才有效（测试独立脚本时，HTTP 403错误）

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-04-03 07:25:01

Google Apps脚本文件上传（通过HTML表单）仅在脚本被“绑定”时才有效（测试独立脚本时，HTTP 403错误）

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-04-03 07:25:01

解决方案1
2 已采纳 2017-04-03 07:25:01