【发布时间】：2018-03-30 17:34:00
【问题描述】：
为了组织一个大型侦察营，我目前正在尝试构建一个 Web 表单，可以在其中提出服务请求（安全、基础设施、材料等）。为此，我想要以下内容：
将（多个）文件上传到 Google Drive 文件夹
将剩余的输入（文本、名称等）写入 google 电子表格
如果可能，将文件位置的 url 写入同一个电子表格
到目前为止，我在结合前两个功能方面完全不成功。在整个过程中，我尝试结合以下方法：
Uploading Multiple Files to Google Drive with Google App Script
HTML form file upload to Google Drive and save URL to google sheet
Google Forms: Send data to spreadsheet
Google Forms file upload complete example
https://gist.github.com/xtman/060edd76c27b7fcb343dfb8e08252693
根据要求，我正在尝试通过以下方式实现此目的： 使两个功能都发生的代码：
frm.submit(function () {
allFiles = document.getElementById('supportingFiles').files;
if (!frm.checkValidity || frm.checkValidity()) {
if (allFiles.length == 0) {
alert('Error: Please choose at least 1 file to upload.');
google.script.run.record_Data(frm);
return false;
} else {
frm.hide();
alert('Step 1');
var subfolderName = document.getElementById('requesterSubject').value;
$.ajax({
url: '',//URL of webhook endpoint for sending a Slack notification
data: {
title: subfolderName + ' is uploading screenshots',
message: ''
}
});
alert('Step 2');
//google.script.run.withSuccesHandler(record_Data(transformedData).transformData('myForm');
google.script.run.withSuccessHandler(afterSubfolderCreated).createSubfolder(subfolderName);
alert('Step 3');
return false;
}
} else {
alert('Invalid form');
return false;
}
});
这是发生错误的地方。它能够按原样运行代码，但是当我尝试同时运行 recordData 函数时，它什么也没做。
函数代码如下：
提交资料
function dataTransform(form){
var transformedData = JSON.stringify( $(form).serializeArray() ); // <-----------
console.log( data );
return transformedData; //don't submit
}
function recordData(e) {
Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
try {
var doc = SpreadsheetApp.openById('some id');
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) {
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 uploadFileToDrive(base64Data, fileName, subfolderId) {
Logger.log(subfolderId);
try{
var splitBase = base64Data.split(','),
type = splitBase[0].split(';')[0].replace('data:','');
var byteCharacters = Utilities.base64Decode(splitBase[1]);
var ss = Utilities.newBlob(byteCharacters, type);
ss.setName(fileName);
var subfolder = DriveApp.getFolderById(subfolderId);
var file = subfolder.createFile(ss);
Logger.log(file);
return file.getName() + ' at ' + file.getUrl();
} catch(e) {
return 'createFile Error: ' + e.toString();
}
}
function createSubfolder(subfolderName) {
var dropbox = Utilities.formatDate(new Date(), "Europe/Amsterdam", "yyyy-MM-dd_hh.mm_") + subfolderName ;
Logger.log(dropbox);
var parentFolderId = "some folder id";
var parentFolder = DriveApp.getFolderById(parentFolderId);
var folder;
try {
folder = parentFolder.getFoldersByName(dropbox).next();
}
catch(e) {
folder = parentFolder.createFolder(dropbox);
}
Logger.log(folder);
return folder.getId();
}
function afterSubfolderCreated(subfolderId) {
console.log(subfolderId);
console.log(allFiles);
numUploads.total = allFiles.length;
$('#progressbar').progressbar({ value: false });
$(".progress-label").html('Preparing files for upload');
for (var i = 0; i < allFiles.length; i++) {
console.log(i);
sendFileToDrive(allFiles[i], subfolderId);
}
}
function sendFileToDrive(file, subfolderId) {
var reader = new FileReader();
reader.onload = function (e) {
var content = reader.result;
console.log('Sending ' + file.name);
google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, subfolderId);
}
reader.readAsDataURL(file);
}
function updateProgressbar(idUpdate) {
console.log('Received: ' + idUpdate);
numUploads.done++;
var porc = Math.ceil((numUploads.done / numUploads.total) * 100);
$("#progressbar").progressbar({value: porc});
$(".progress-label").text(numUploads.done + '/' + numUploads.total);
if (numUploads.done == numUploads.total) {
numUploads.done = 0;
$(".progress-label").text($(".progress-label").text() + ': FINISHED!');
$("#progressbar").after('(Optional) Refresh this page if you want to fill out another request.');
//<a href="javascript:window.top.location.href=window.top.location.href"> does not work
}
}
function fileUploaded(status) {
document.getElementById('myForm').style.display = 'none';
document.getElementById('output').innerHTML = status;
}
【问题讨论】：
-
“现在我不会用代码来打扰你” 你能否包括你在问题中尝试过的代码。见stackoverflow.com/help/how-to-ask、stackoverflow.com/help/mcve
-
包含代码，以便我们更好地帮助您。整个过程只涉及使用 HTMLService 将表单获取到“服务器端”，然后使用 DriveApp 上传文件（表单将它们作为 blob 提供给您），从中获取链接，最后使用 SpreadsheetApp 将其全部放入你的谷歌表格。
-
我不同意这里对 HTMLService 的需求：这一切都可以通过 Google Forms 和 Google Sheets 来完成。顺便说一句，Forms 已经为您完成了所有这些工作（处理多个文件的上传、将提交的数据写入电子表格、将文件 URL 写入同一个电子表格）：您需要实现哪些没有提供的功能？
-
很公平，上面的内容可以用谷歌表单大致完成，但对我来说问题是它需要一个谷歌帐户。我还包含了上面的部分代码，但由于我对这一切都很陌生，如果有任何遗漏，请纠正我。
-
在 webapps 问题中组织代码的常用方法是明确指出哪些脚本在 .gs 代码文件中（仅在服务器端运行），哪些在
<script>标记中HtmlService呈现的客户端 .html 文件。只有 .gs 文件中的代码才能通过google.script.run访问 - 请查看 developers.google.com/apps-script/guides/html/communication 和其他与 webapp 相关的指南和文档
标签： javascript google-apps-script