javascript - 结合 google.script.run 和 javascript 函数

Question

我正在构建一个带有文件上传功能的自定义“Google 表单”表单。 该表单使用自定义“Thankyou”页面(请参阅第一行:iframe)。
我找到了一个需要在 Google Script 环境中运行的文件上传脚本，它会将文件上传到我的 Google 云端硬盘。

现在我需要将这个上传脚本与我的自定义 Google 表单结合起来。 但我不知 Prop 体如何实现这一点，因为需要组合操作，并且必须先完成文件上传，然后才能转到“谢谢”页面。

我尝试将其组合起来，如下面的代码所示。

形式:

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  { picUploadJs(myForm); }"></iframe>

<form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
     <input placeholder="1234" name="entry.1234" id="user" type="text">
     <label for="user">User:</label>

     <input name="picToLoad" type="file" />

     <div id="status" style="display: none">
       Uploading. Please wait...
     </div

   <button type="submit" name="action">Send</button>
</form>

上传脚本:

<script>

  function picUploadJs(frmData) {

    document.getElementById('status').style.display = 'inline';

    google.script.run
      .withSuccessHandler(updateOutput)
      .processForm(frmData)
    };

  function updateOutput() {

    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }

</script>

现在的结果是: 提交表单输入数据，出现上传状态文本但没有任何反应:“正在上传。请稍候...”。

结果应该是: 表单输入数据提交，上传文件到驱动器并重定向到thankyou页面。

编辑: 谷歌脚本代码

function doGet(e) {
  return HtmlService.createTemplateFromFile('test')
    .evaluate() // evaluate MUST come before setting the Sandbox mode
    .setTitle('Name To Appear in Browser Tab')
    //.setSandboxMode();//Defaults to IFRAME which is now the only mode available
}

function processForm(theForm) {
  var fileBlob = theForm.picToLoad;

  Logger.log("fileBlob Name: " + fileBlob.getName())
  Logger.log("fileBlob type: " + fileBlob.getContentType())
  Logger.log('fileBlob: ' + fileBlob);

  var fldrSssn = DriveApp.getFolderById('xxxx');
    fldrSssn.createFile(fileBlob);

  return true;
}

Answer 1

• 当您点击“发送”按钮时，
  • Google 表单运行良好。
  • document.getElementById('status').style.display = 'inline' 有效。
  • Google Apps 脚本中的 processForm(frmData) 函数不起作用。
  • Javascript 中的 updateOutput() 函数不起作用。

如果我的理解是正确的，这个修改怎么样？请将此视为几个答案之一。

修改点:

• 在此修改中，文件是使用onclick 事件检索的，而提交到 Google Form 的脚本没有修改。
• 检索到的文件被转换为 base64 并发送到 Google Apps 脚本。

修改后的脚本:

HTML:

<form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
  <input placeholder="1234" name="entry.1234" id="user" type="text">
  <label for="user">User:</label>
  <input name="picToLoad" type="file" id="sampleFile" /> <!-- Modified -->
  <div id="status" style="display: none">
  Uploading. Please wait...
  </div>
  <button type="submit" name="action" id="sampleId" >Send</button> <!-- Modified -->
</form>

Javascript:

<script>
  // Below script was added.
  document.getElementById("sampleId").onclick = function(e) {
    e.stopPropagation();
    e.preventDefault();
    var file = document.getElementById("sampleFile").files[0];
    const f = new FileReader();
    f.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      picUploadJs(obj);
    }
    f.readAsDataURL(file);
  };

  function picUploadJs(frmData) {
    document.getElementById('status').style.display = 'inline';
    google.script.run.withSuccessHandler(updateOutput).processForm(frmData)
  };

  function updateOutput() {
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }
</script>

Google Apps 脚本:

function processForm(theForm) {
  var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
  var fldrSssn = DriveApp.getFolderById('xxxx');
  fldrSssn.createFile(fileBlob);
  return true;
}

注意事项:

• 选择文件并点击“发送”按钮后，文件将发送到 Google Apps 脚本并在 Google Drive 上创建为文件，同时提交 Google 表单。然后运行 ​​Javascript 端的 updateOutput()。
• 在此修改后的脚本中，使用了 blob。因此上传文件的最大大小为 50 MB。请注意这一点。

编辑 1:

根据您的评论，我们发现当我从提交按钮中删除 id=sampleId 时，Google 表单数据已正确提交。使用它，请测试以下修改。

在此修改中，id="sampleId" 被删除，事件使用元素名称触发。

HTML:

<form id="myForm" target="hidden_iframe" onsubmit="submitted=true;">
  <input placeholder="1234" name="entry.1234" id="user" type="text">
  <label for="user">User:</label>
  <input name="picToLoad" type="file" id="sampleFile" />
  <div id="status" style="display: none">
  Uploading. Please wait...
  </div>
  <button type="submit" name="action">Send</button> <!-- Modified -->
</form>

Javascript:

var button = document.getElementsByName('action')[0]; // Modified
button.onclick = function(e) { // Modified
  e.stopPropagation();
  e.preventDefault();
  var file = document.getElementById("sampleFile").files[0];
  const f = new FileReader();
  f.onload = (e) => {
    const data = e.target.result.split(",");
    const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
    picUploadJs(obj);
  }
  f.readAsDataURL(file);
};

编辑2:

我更新了 HTML 和 Javascript。请证实。 Google Apps 脚本未修改。

HTML:

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted)  { picUploadJs(myForm); }"></iframe>
<form id="myForm" action="https://docs.google.com/forms/d/e/xxx/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
  <input placeholder="1234" name="entry.1234" id="user" type="text">
  <label for="user">User:</label>
  <input name="picToLoad" type="file" id="sampleFile" /> <!-- Modified -->
  <div id="status" style="display: none">
  Uploading. Please wait...
  </div>
  <button type="submit" name="action">Send</button>
</form>

Javascript:

<script>
  // This function was modified.
  function picUploadJs(myForm) {
    var file = document.getElementById("sampleFile").files[0];
    const f = new FileReader();
    f.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      document.getElementById('status').style.display = 'inline';
      google.script.run.withSuccessHandler(updateOutput).processForm(obj);
    }
    f.readAsDataURL(file);
  }

  function updateOutput() {
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }
</script>