【发布时间】：2019-12-17 19:33:49
【问题描述】：
以下代码适用于前 4 个输入字段，并将文件上传到电子表格。第一次，它将数据和文件上传到电子表格，但是当我在表单中添加更多输入字段时，我还自定义了 code.gs 但它不起作用。当我提交它时保持上传状态并且不将数据发送到电子表格。
code.gs
var SHEET_NAME = "Sheet1";
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new property service
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Registration With Document");
}
function uploadFileToGoogleDrive(data, file, code, issues, item, description, problem, defect,
solution, notes) {
try {
var dropbox = "Received Files";
var folder=DriveApp.getFolderById('1xqpdunLg-ygxOxwJvEHjScNhIT2qVgsF');
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob),
filelink=file.getUrl() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000);
var doc = SpreadsheetApp.openById("1Diy70efaCR8Po5drNNZ5_AcJ_nQEJP37_CMSLXlxLQs");
var sheet = doc.getSheetByName(SHEET_NAME);
var headRow = 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a 'Timestamp' column
row.push(new Date());
} else if (headers[i] == "code"){
row.push(code);
} else if (headers[i] == "issues"){
row.push(issues);
} else if (headers[i] == "item"){
row.push(item);
} else if (headers[i] == "description"){
row.push(description);
} else if (headers[i] == "problem"){
row.push(problem);
} else if (headers[i] == "defect"){
row.push(defect);
} else if (headers[i] == "solution"){
row.push(solution);
} else if (headers[i] == "notes"){
row.push(notes);
} else if (headers[i] == "filelink"){
row.push(filelink);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return "OK";
} catch (f) {
return f.toString();
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("1Diy70efaCR8Po5drNNZ5_AcJ_nQEJP37_CMSLXlxLQs", doc.getId());
}
forms.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<style>
.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400
12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
</head>
<body>
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12
<h5 class="center-align teal-text">Repair/Issue Form</h5>
<p class="disclaimer">Fill up all fields.</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="code" type="text" name="Date Code" class="validate" required="" aria-required="true">
<label for="code">Date Code</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="issues" type="text" name="Reported Issues" class="validate" required="" aria-
required="true">
<label for="issues">Reported Issues</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="item" type="text" name="Item Number" class="validate" required="" aria-required="true">
<label for="item">Item Number</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="description" type="text" name="Description" class="validate" required="" aria-
required="true">
<label for="description">Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="problem" type="text" name="Problem" class="validate" required="" aria-required="true">
<label for="problem">Problem</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="defect" type="text" name="Frequency of Defect" class="validate" required="" aria-
required="true">
<label for="defect">Frequency of Defect</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="solution" type="text" name="Possible Issues" class="validate" required="" aria-
required="true">
<label for="solution">Possible Issues</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="notes" type="text" name="Notes" class="validate" required="" aria-required="true">
<label for="notes">Notes</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a file on your computer">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return
false;">Submit</button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
<p class="center-align"><a class="btn btn-large" onclick="restartForm()" >Restart</a></p>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
</script>
<script>
var file, reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
howError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#code').val(),
$('input#issues').val(), $('input#item').val(), $('input#description').val()),
$('input#problem').val(), $('input#defect').val(), $('input#solution').val(),
$('input#notes').val();
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset");
$('#forminner').show();
$('#success').hide();
$('#progress').html("");
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("Uploading file..");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
【问题讨论】：
-
这是一个有效的表单示例：stackoverflow.com/a/59379764/7215091
-
您是否在控制台中遇到任何错误？
-
您能否更具体地说明您遇到的问题？也许提供一个简化的例子？请考虑在没有适当缩进的情况下发布数百行代码并不是从该社区获得帮助的最佳方式。此外，一份不含敏感信息的电子表格副本可能会有用。最后，检查this。
-
是的，先生，当我提交表单时，它卡在“正在上传文件...”上，并且我在控制台中收到“index.html:134 上未定义谷歌”的错误"。
标签： forms google-apps-script file-upload google-sheets spreadsheet