结合google.script.run和javascript函数 [英] Combine google.script.run and javascript function

问题描述

我正在构建具有文件上传功能的自定义"Google表单"表单. 该表单使用自定义的谢谢"页面(请参阅第一行:iframe).
我发现需要在Google脚本环境中运行的文件上传脚本，它将文件上传到我的Google云端硬盘.

I'm building a custom "Google Forms"-form with a file upload function. The form uses a custom "Thankyou"-page (see 1st line: iframe).
I've found a file upload script that needs to run in the Google Script environment and it will upload files to my Google Drive.

现在，我需要将此上传脚本与我的自定义Google表单结合使用. 但是我不知道具体如何实现，因为有一些动作需要合并，并且必须先完成文件上传，然后才能进入谢谢"页面.

Now I need to combine this upload script with my custom Google Form. But I don't know exactly how to achieve this because there actions that need to be combined and the file upload has to be completed first before going to the "Thank you" page.

我试图将其组合起来，类似于下面的代码.

I've tried to combine it which looks like the code below.

表格:

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

这现在导致: 表单输入数据已提交，上传状态文本出现，但未发生任何事情:正在上传.请稍候...".

This now results in: Form input data is submitted, upload status text appears but nothing happens: "Uploading. Please wait...".

结果应为: 表单输入数据提交，上传文件以驱动并重定向到thankyou页面.

The result should be: Form input data submit, upload file to drive and redirect to the thankyou page.

Google脚本代码

Google Script code

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;
}

推荐答案

• 当您单击发送"按钮时，
  • Google表单运行正常.
  • document.getElementById('status').style.display = 'inline'有效.
  • 在Google Apps脚本中processForm(frmData)的功能不起作用.
  • updateOutput()在Javascript中的功能不起作用.
  • When you click "Send" button,
    • Google Form works fine.
    • document.getElementById('status').style.display = 'inline' works.
    • Function of processForm(frmData) at Google Apps Script doesn't work.
    • Function of updateOutput() at Javascript doesn't work.

    如果我的理解是正确的，那么该修改如何?请认为这只是几个答案之一.

    If my understanding is correct, how about this modification? Please think of this as just one of several answers.

    • 在此修改中，使用onclick事件检索了文件，而未修改用于提交给Google Form的脚本.
    • 检索到的文件将转换为base64并发送到Google Apps脚本.
    • In this modification, the file was retrieved using onclick event, while the script for submitting to Google Form is not modified.
    • The retrieved file is converted to base64 and sent to Google Apps Script.

    <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表单时在Google云端硬盘中创建为文件.然后运行Javascript端的updateOutput().
    • 在此修改后的脚本中，使用了Blob.因此，要上传的文件的最大大小为50 MB.请注意这一点.

    Note:

    • When the file is selected and click a "Send" button, the file is send to Google Apps Script and is created as a file on Google Drive, while Google Form is submitted. Then updateOutput() at Javascript side is run.
    • In this modified script, The blob is used. So the maximum size of a file for uploading is 50 MB. Please be careful this.

    在您的评论中，发现了When I remove the id=sampleId from the submit button, the Google Form data is submitted correctly.使用此功能，请测试以下修改.

    At your comment, it was found that When I remove the id=sampleId from the submit button, the Google Form data is submitted correctly. Using this, please test the following modification.

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

    In this modification, id="sampleId" was removed and the event is triggered using the name of element.

    <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);
    };
    

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

    Edit 2:

    I updated HTML and Javascript. Please confirm it. Google Apps Script is not modified.

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

    这篇关于结合google.script.run和javascript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！