#javascript #html #forms #google-apps-script #google-sheets
#javascript #HTML #формы #google-apps-script #google-sheets
Вопрос:
Я совсем новичок в HTML-кодировании. Я пытаюсь разработать веб-форму для сбора данных в таблице Google. Собранные данные также состоят из некоторого текста и изображения. Моя проблема в том, что я не могу заставить страницу обновляться обратно в веб-форму после отправки данных.Пожалуйста, помогите мне решить эту проблему.
Я работаю над следующим кодом, найденным по адресу https://mysharepointexperiences.wordpress.com/2016/12/02/upload-file-to-google-drive-and-insert-data-into-spreadsheet-using-google-apps-script/.
HTML-код:
<form id="uploadForm"
action="THE LINK TO THE PUBLISHED WEBAPP GOES HERE" method="POST">
<input type="hidden" value="" name="fileContent" id="fileContent">
<input type="hidden" value="" name="filename" id="filename">
<center><label>Calling Name :</label></center>
<center><input required type="text" value="" name="name" id="name">
</center><br>
<center><label>Brief description of observation :</label></center>
<center><input required type="text" value="" name="contact" id="contact">
</center><br>
</form>
<center><label>Upload Image </label></center><br>
<center><input required id="attach" name="attach" type="file"/></center>
<br>
<center><input value="Submit" type="button" onclick="UploadFile();" />
</center>
<script>
function UploadFile() {
var reader = new FileReader();
var file = document.getElementById('attach').files[0];
reader.onload = function(){
document.getElementById('fileContent').value=reader.result;
document.getElementById('filename').value=file.name;
document.getElementById('uploadForm').submit();
}
reader.readAsDataURL(file);
}
</script>
Скрипт Google (Code.gs ) :
var emailTo= "**THE EMAIL ADDRESS YOU WISH TO GET NOTIFIED OF A SUBMISSION GOES HERE**"
function doPost(e) {
try {
var data = e.parameter.fileContent;
var filename = e.parameter.filename;
var email = e.parameter.email;
var name = e.parameter.name;
var result=uploadFileToGoogleDrive(data,filename,name,email,e);
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"success","data": JSON.stringify(result) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}
// new property service GLOBAL
var SCRIPT_PROP = PropertiesService.getScriptProperties();
// see: https://developers.google.com/apps-script/reference/properties/
/**
* select the sheet
*/
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty("key", doc.getId());
}
/**
* record_data inserts the data received from the html form submission
* e is the data received from the POST
*/
function record_data(e,fileUrl) {
try {
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
var sheet = doc.getSheetByName('responses'); // select the responses sheet
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()
[0];
var nextRow = sheet.getLastRow() 1; // get next row
var row = [ new Date() ]; // first element in the row should always be a
timestamp
// loop through the header columns
for (var i = 1; i < headers.length; i ) { // start at 1 to avoid
Timestamp column
if(headers[i].length > 0 amp;amp; headers[i] == "resume") {
row.push(fileUrl); // add data to row
}
else if(headers[i].length > 0) {
row.push(e.parameter[headers[i]]); // add data to row
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
}
catch(error) {
Logger.log(e);
}
finally {
return;
}
}
function uploadFileToGoogleDrive(data, file, name, email,e) {
try {
var dropbox = "Images";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,') 7)),
blob = Utilities.newBlob(bytes, contentType, file);
var file = folder.createFolder([name, email].join("-")).createFile(blob);
var fileUrl=file.getUrl();
//Generating Email Body
var html =
'<body>'
'<h2> New Job Application </h2>'
'<p>Name : ' e.parameters.name ' </p>'
'<p>Email : ' e.parameters.email '</p>'
'<p>Contact : ' e.parameters.contact '</p>'
'<p>Skill Sets : ' e.parameters.skillsets '</p>'
'<p>LinkedIn Url : ' e.parameters.linkedinUrl '</p>'
'<p>File Name : ' e.parameters.filename '</p>'
'<p><a href=' file.getUrl() '>Resume Link</a></p><br />'
'</body>';
record_data(e,fileUrl);
MailApp.sendEmail(emailTo, "New Observation Recieved","New observation Recieved",{htmlBody:html});
return file.getUrl();
} catch (f) {
return ContentService // return json success results
.createTextOutput(
JSON.stringify({"result":"file upload failed",
"data": JSON.stringify(f) }))
.setMimeType(ContentService.MimeType.JSON);
}
}
Ответ №1:
Рассмотрение
Вы не перенаправляете своего пользователя на страницу формы, когда отправка формы проходит успешно. Вместо этого вы возвращаете полезную нагрузку JSON:
function doPost(e) {
try {
// ...
return ContentService // return json success results
.createTextOutput(JSON.stringify({"result":"success","data": JSON.stringify(result) }))
.setMimeType(ContentService.MimeType.JSON);
Решение
Вы должны вернуть с HtmlOutput помощью скрипта приложений HtmlService :
return HtmlService.createHtmlOutput('your-form-html');
Или, если у вас есть форма HTML в файле внутри вашего проекта скрипта приложений, вы можете использовать:
return HtmlService.createHtmlOutputFromFile('form-html-filename');
Возможно, вам также захочется использовать HtmlTemplate класс, чтобы показать сообщение, которое вы теперь возвращаете как JSON, на странице с отображением формы HTML. Для этого вы можете использовать:
var template = HtmlService.createTemplateFromFile('form-html-template-filename');
template.message = "Upload successful" //based on your try catch for example
return template.evaluate(); // The evaluate() method returns an HtmlOutput
Для запуска этого последнего параметра вам нужно будет создать HTML-форму со специальным синтаксисом:
<p>
<?= message ?>
</p>
<!-- Having here below the rest of your form HTML -->
<form id="uploadForm"
action="THE LINK TO THE PUBLISHED WEBAPP GOES HERE" method="POST">