![](/img/trans.png)
[英]google.script.run function won't write to JavaScript global variable using await
[英]Combine google.script.run and javascript function
我正在構建一個帶有文件上傳功能的自定義“Google 表單”表單。 該表單使用自定義的“Thankyou”頁面(請參閱第一行:iframe)。
我找到了一個需要在 Google Script 環境中運行的文件上傳腳本,它會將文件上傳到我的 Google Drive。
現在我需要將此上傳腳本與我的自定義 Google 表單結合起來。 但我不知道如何實現這一點,因為在進入“謝謝”頁面之前,需要組合操作並且必須先完成文件上傳。
我試圖將它組合起來,看起來像下面的代碼。
表格:
<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>
現在的結果是:提交表單輸入數據,出現上傳狀態文本但沒有任何反應:“正在上傳。請稍候...”。
結果應該是:表單輸入數據提交,上傳文件到驅動並重定向到感謝頁面。
編輯:谷歌腳本代碼
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;
}
document.getElementById('status').style.display = 'inline'
有效。processForm(frmData)
函數不起作用。updateOutput()
函數不起作用。如果我的理解是正確的,這個修改怎么樣? 請將此視為幾個答案之一。
onclick
事件檢索的,而提交到 Google Form 的腳本沒有修改。<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>
<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>
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;
}
updateOutput()
。 在您的評論中,發現When I remove the id=sampleId from the submit button, the Google Form data is submitted correctly
。 使用這個,請測試以下修改。
在此修改中,刪除了id="sampleId"
並使用元素名稱觸發事件。
<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>
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 腳本。
<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>
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.