Javascript 使用自定义表单将多个文件上载到Google Drive，并在电子表格上记录表单响应

为了组织一个大型的童子军营地，我目前正在尝试构建一个web表单，在这里可以请求服务（安全、基础设施、材料等）。为此，我希望了解以下情况：

• 将（多个）文件上载到google drive文件夹

• 将剩余的输入（文本、名称等）写入谷歌电子表格

• 如果可能，将文件位置的url写入同一电子表格

到目前为止，我在结合前两个功能方面完全没有成功。在整个课程中，我尝试了以下方法：

根据要求，我正试图通过以下方式实现这一目标： 使两个函数同时发生的代码：

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;
  }
}

函数数据转换（表单）{
var transformedData=JSON.stringify（$（form）.serializedArray（））；//我不知道代码，能力不够。但是，当您通过谷歌表单在电子表格中输入数据时，您可以使用Autocrat附加组件生成一个pdf文件的谷歌文档，该文件将通过电子邮件发送并保存到单个文件夹中。您还可以使用动态参考文件夹ID将文件同时保存到多个文件夹中一次。你所要做的就是在电子表格中输入Google Drive文件参考。如果你有数百个文件夹要链接，这可能会很费劲，但我用大约100名学生来做评估，效果非常好。希望这能帮上忙…
“现在我不会用代码来打扰你”你能包含你在问题中尝试过的代码吗？请看，包含代码以便我们能更好地帮助你。整个过程只需要使用HTMLService将表单发送到“服务器端”，然后使用DriveApp上传文件（表单将它们作为blob提供给你），从他们那里获取链接，最后使用电子表格应用程序将其全部放在您的谷歌表格中。我不同意这里对HTMLService的需要：所有这些都可以通过谷歌表单和谷歌表格来完成。顺便说一句，表单已经为您完成了所有这些（处理多个文件的上载、将提交的数据写入电子表格、将文件URL写入同一电子表格）：您需要实现哪些没有提供的功能？很公平，上面的内容可以通过Google forms大致完成，但对我来说，问题是它需要一个Google帐户。我也包含了上面的部分代码，但由于我对这一切非常陌生，如果缺少任何内容，请纠正我。在您的应用程序中组织代码的一种常见方法webapps的问题是明确指出哪些脚本位于.gs代码文件中（仅在服务器端运行），并且位于客户端.html文件中的
标记中，该文件由
HtmlService
呈现。只有.gs文件中的代码才能通过
google.script.run访问。请查看和其他webapp相关的指南和文档
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;
}