如何从方形空间页面调用谷歌应用程序脚本?

时间:2016-08-31 10:16:08

标签: file upload squarespace

我在squarespace网站上玩现成的代码。我找到了一种方法,通过设置现成的谷歌应用程序脚本将文件上传到我的谷歌驱动器。它可以在发布应用程序的网址上正常工作。

然而,我通过代码注入在方形空间页面上的现成解决方案中实现了html代码,它显然不起作用。可能脚本代码中没有任何信息可以导致通过发布应用程序生成的特定URL。

这是我用于方形空间注入的​​代码(我需要一些代码将我连接到谷歌应用程序脚本服务器端)

 <div align="center">
  <table width="459" border="0">
    <tbody>
      <tr>
        <td width="462"><div align="center">
           <hr>
         </div>
          <form id="myForm" align="center">
            <input type="text" name="myName" placeholder="Your name..">
            <input type="file" name="myFile">
            <input type="submit" value="Upload File" 
           onclick="this.value='Uploading..';
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">
          </form>
          <div id="output"></div>
          <script>
     function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
          </script>
        <style>
 input { display:block; margin: 20px; }

           </style>
         <hr></td>
      </tr>
    </tbody>
  </table>
   <h3>&nbsp;</h3>
   <p>&nbsp;</p>
</div>

现在这是服务器端的代码:

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function uploadFiles(form) {

  try {

    var dropbox = "RHT";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

请帮助这个必须添加的非常简单的代码才能使其正常工作。

非常感谢

2 个答案:

答案 0 :(得分:1)

现在,您可以将Google脚本的前几行更改为以下内容;

function doGet() {
   return HtmlService.createHtmlOutputFromFile('index.html').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

然后你可以将一个代码块添加到Squarespace和一个iframe,或者我将我的位于Form-Block的高级选项卡下,在POST-SUBMIT HTML部分中(用户首先填写我的表单,然后才能够用脚本上传他们的内容)我使用这段代码,但你可以调整宽度或等等;

<iframe src="https://YourPublishedGoogleScriptURLhere"width="625"height="361"frameborder="0"></iframe>

答案 1 :(得分:0)

我有同样的问题。我认为问题在于Google阻止我们在iframe等域内使用脚本。我目前的解决方案是

  1. 在Squarespace中创建表单
  2. 在&#34;字段&#34;
  3. 中输入所需信息
  4. 在“高级”标签中,插入从http://www.squareguru.com/form-redirect获取的代码,该代码会自动将用户重定向到您的Google脚本。代码看起来像这样;

    <meta http-equiv="refresh" content="0; url=https://script.google.com/macros/s/etc"> <script> window.location.href = 'https://script.google.com/macros/s/etc'; window.location.assign('https://script.google.com/macros/s/etc'); </script>

  5. 在我的Google脚本&#34; server.gs&#34;页面,我刚刚将行return "File uploaded successfully " + file.getUrl();更改为return "File uploaded successfully. Please click the back button in your browser to return to Site Name";

  6. 如果有人知道如何将Google Apps脚本重定向到其他网址,而不是显示&#34;文件已成功上传&#34;,那么我可以将其重定向到我网站上的一个页面,其中显示上传成功完成并继续查看我们的其他博客等。

    我还测试了jotform.com,它允许您在表单中将文件上传到Google云端硬盘,但是他们每月收取费用,除非他们的免费套餐满足您的需求。然后,他们会为您提供将表单插入Squarespace的代码。

    希望这有用。如果有人想在Google Apps脚本完成后重定向到另一个网址,请告诉我们。

    编辑:我想你还需要这个<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>,它位于Advanced&gt;代码注入&gt;标题,允许脚本运行。