我有一张Google表格 https://docs.google.com/forms/d/13bxRVQO5rEJr6dnkQL4ro2h15glJHNUe6YEzPmuwSdU/formResponse
我希望在表单的最后一页有文件上传功能。
我承认必须使用Google Apps脚本,我已准备好
脚本https://script.google.com/macros/s/AKfycbyEsIpckunY7lMR2zIU4o5p7bwgh4nDuKqizNn8X7E/dev
现在的障碍是这两个是独立的组件,我想弄清楚如何将这两个组合在一起。
Google表单上必须有一个启动此脚本的触发器,那么应该怎么做呢?
我还尝试了一种非常愚蠢的方式在另一个网站上调用iFrame中的表单,但是后来尝试使用jQuery更改元素导致我出现了一个无法修复的CORS问题。
这种iframe方式出现在
server.gs
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html')
.setTitle('NewSchools Catapult: Invent 2015');
}
function uploadFiles(form) {
try {
var dropbox = "Random Work";
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 ! <input type='text' value='" + file.getUrl() + "' /><p>Kindly, Copy the text and paste it in the form<br/>";
} catch (error) {
return error.toString();
}
}
form.html
<body>
<div class="container1">
<div class="container2">
<h2>NewSchools Catapult: Invent 2015</h2>
<p>Invent 2015: Planning Application for new schools launching in 2016</p>
<form id="myForm">
<label>Your Name<strong> *</strong></label>
<input style="margin-top:2px;" type="text" name="myName" required placeholder="Enter 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>
</div>
</div>
<body>
<script>
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
</script>
<style>
input { display:block; margin: 20px; }
label { display:block; margin-left: 20px; font-size:0.90rem;}
body {background-color:#fefefe;font-family: Verdana;}
strong {color:red;}
.container1 {
margin: 50px auto;
width: 640px;
background-color:#fff;
border:2px #eee;
}
.container2 {
position: relative;
margin: 0 auto;
padding: 20px 20px 20px;
width: 100%;
background-color:rgb(255,217,102);
border-color:rgb(212,212,212);
box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.container2 h2 {
color:rgb(74,134,232);
font-weight: 600;
font-style: normal;
font-size:2.460rem;
}
.container2 p {
color:rgb(140,140,140);
font-size:0.78rem;
}
#output, #output p {
font-size:
color:rgb(97,97,97);
}
#output input { width:550px; }
</style>