How to call google apps script from a squarespace page? - file

Question

I am playing with readymade code in my squarespace website. I found a way to upload files to my google drive by setting up a readymade google apps script. It works fine on the url given by publishing the app.
However i implemented the html code from the readymade solution on my squarespace page by code injection and it obviously doesn't work. Probably there is no info in the script code that leads to the particular URL generated by publishing the app.
This is the code i use for injection in squarespace (i need some code that connects me to the google app script server side)
<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> </h3>
<p> </p>
</div>
Now here is what the code on server side looks like:
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();
}
}
Please help this must be very simple code to add to make it work.
Thanks a lot

Answer 1

You can now do this by changing the first few lines of your Google Script to the following;
function doGet() {
return HtmlService.createHtmlOutputFromFile('index.html').setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
Then you can either add a Code Block into Squarespace and an iframe, or I have mine located under the Advanced tab of a Form Block, in the POST-SUBMIT HTML section (users fill out my form first, then are able to upload their content with the script) I use this code, but you can adjust the widths or whatnot;
<iframe src="https://YourPublishedGoogleScriptURLhere"width="625"height="361"frameborder="0"></iframe>

Answer 2

I have this same issue. I believe the issue is that Google is blocking us from using the script in iframes and such, outside of their domain. My current solution is to
Create a Form in Squarespace
Enter required information into the "fields"
In the Advanced tab, insert code obtained from http://www.squareguru.com/form-redirect which will automatically redirect users to your Google Script. The code looks like this;
<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>
In my Google Script "server.gs" page, I just changed the line return "File uploaded successfully " + file.getUrl(); to return "File uploaded successfully. Please click the back button in your browser to return to Site Name";
If anyone knows how to have a Google Apps Script redirect to another URL after it is completed instead of displaying "File uploaded successfully", then I could have it redirect to a page on my site which says the upload completed successfully and to continue looking at our other blogs, etc.
I'm also testing out jotform.com which lets you do file uploads into Google Drive in their forms, but they charge a monthly fee unless their free tier covers your needs. They then give you the code to insert the form into Squarespace.
Hope this was helpful. If anyone has ideas to redirect to another URL after the Google Apps Script completes, please let me know.
EDIT: I imagine you would also need this <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> which is placed in Advanced > Code Injection > Header, to allow the script run.