如何使用 html 和 google apps 脚本创建具有两个输入字段的表单，这两个字段都需要文件上传？

Question

我试图通过修改此处 (https://www.bpwebs.com/upload-files-to-google-drive-with-google-apps-script/) 中的代码来请求用户在两个单独的字段中上传文件。它仅适用于具有一个文件字段的表单。谁能指出我的错误？似乎 uploadFiles() 函数不能接受类型文件的两个元素？我试过了，但这超出了我的能力范围。提前致谢！

code.gs

var folderID = "root"; 
    var sheetName = "Data"; 

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function uploadFiles(formObject) {
    var sheetName = 'Sheet1'
        var scriptProp = PropertiesService.getScriptProperties()

        function intialSetup () {
          var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
          scriptProp.setProperty('key', activeSpreadsheet.getId())
        }

  try {
    var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
        var sheet = doc.getSheetByName(sheetName)
    
    var folder = DriveApp.getFolderById(folderID);


    var fileUrl = "";
    var fileName = "";
    var fileUrl2 = "";
    var fileName2 = "";

    //Upload file if exists and update the file url
    if (formObject.myFile1.length > 0) {
      var blob = formObject.myFile1;
      var file = folder.createFile(blob);
      file.setDescription("Uploaded by " + formObject.first_name);
      fileUrl = file.getUrl();
      fileName = file.getName();
    } else{
      fileUrl = "Record saved without a file";
    }
    
    //Upload file if exists and update the file url
    if (formObject.myFile2.length > 0) {
      var blob2 = formObject.myFile2;
      var file2 = folder.createFile(blob2);
      file2.setDescription("Uploaded by " + formObject.first_name);
      fileUrl2 = file2.getUrl();
      fileName2 = file2.getName();
    } else{
      fileUrl2 = "Record saved without a file";
    }

    //Saving records to Google Sheet
    sheet.appendRow([
      formObject.myName,
      formObject.myEmail,
      formObject.myNum,
      fileName,
      fileUrl,
      fileName2,
      fileUrl2,
      Utilities.formatDate(new Date(), "GMT+8:00", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);
    
    return true;
    
  } catch (error) {
    return error.toString();
  }
}

Index.html

<!DOCTYPE html>
<html>
<head>
  <title>Uploads</title>
</head>

<body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
          <h1>Personal Details</h1><hr>
        <table>
            <tr>
                <td><label>Please state your name</label></td>
                <td><input type="text" name="myName"></td>
            </tr>
            <tr>
                <td><label>Please provide your email address.</label></td>
                <td><input type="email" name="myEmail"></td>
            </tr>
            <tr>
                <td><label>Please provide your contact number (optional)</label></td>
                <td><input type="number" name="myNum"></td>
            </tr>
        </table>
       <br><br>
            <label>Upload photo/video</label>
                <input type="file" name="myFile1">
            <br>
            <label>Upload photo/video</label>
                <input type="file" name="myFile2">         
            <br>        
          <br>
          <button type="submit" onclick = submitForm(this.form)>Submit</button>
        </form>
        <br>
        <div id="output"></div>

  <script>
    function preventFormSubmit() {
          var forms = document.querySelectorAll('form');
          for (var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', function(event) {
              event.preventDefault();
            });
          }
        }
    window.addEventListener('load', preventFormSubmit);

    function handleFormSubmit(formObject){
      google.script.run.uploadFiles(formObject);
    }
  </script>

</body>
</html>

Answer 1

你的情况，下面的修改怎么样？

修改后的脚本：

HTML&Javascript 边:

在本次修改中，请将您的HTML函数修改如下。

发件人：

<button type="submit" onclick = submitForm(this.form)>Submit</button>

收件人：

<button type="submit">Submit</button>

Google Apps 脚本端：

在本次修改中，请将您的uploadFiles函数修改如下。

发件人：

var fileUrl = "";
var fileName = "";
var fileUrl2 = "";
var fileName2 = "";

//Upload file if exists and update the file url
if (formObject.myFile1.length > 0) {
  var blob = formObject.myFile1;
  var file = folder.createFile(blob);
  file.setDescription("Uploaded by " + formObject.first_name);
  fileUrl = file.getUrl();
  fileName = file.getName();
} else{
  fileUrl = "Record saved without a file";
}

//Upload file if exists and update the file url
if (formObject.myFile2.length > 0) {
  var blob2 = formObject.myFile2;
  var file2 = folder.createFile(blob2);
  file2.setDescription("Uploaded by " + formObject.first_name);
  fileUrl2 = file2.getUrl();
  fileName2 = file2.getName();
} else{
  fileUrl2 = "Record saved without a file";
}

//Saving records to Google Sheet
sheet.appendRow([
  formObject.myName,
  formObject.myEmail,
  formObject.myNum,
  fileName,
  fileUrl,
  fileName2,
  fileUrl2,
  Utilities.formatDate(new Date(), "GMT+8:00", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);

收件人：

var files = ["myFile1", "myFile2"].flatMap(e => {
  var file = folder.createFile(formObject[e]);
  var fileName = file.getName();
  var fileUrl = "Record saved without a file";
  if (file.getSize() > 0 && fileName != "Untitled") {
    file.setDescription("Uploaded by " + formObject.first_name);
    fileUrl = file.getUrl();
  } else {
    fileName = "";
    file.setTrashed(true);
  }
  return [fileName, fileUrl];
});
sheet.appendRow([
  formObject.myName,
  formObject.myEmail,
  formObject.myNum,
  ...files,
  Utilities.formatDate(new Date(), "GMT+8:00", "yyyy-MM-dd'T'HH:mm:ss'Z'")
]);

注：

2021 年 12 月，在 V8 运行时，包含文件对象的表单对象必须能够从 Javascript 正确解析为 Google Apps 脚本。 Ref 错误已解决。似乎关于文件对象，在当前阶段，可以使用 createFile 方法将对象创建为文件。但是，不幸的是，似乎无法直接从表单对象中检索文件内容。因此，作为变通方法，在文件从已解析的表单对象创建为文件后，我使用了检查文件大小和文件名的方法。如果不出现Forms with file inputs must be the only parameter.这样的错误，当第二个参数可以像google.script.run.uploadFiles(formObject, arg2)那样使用时，过程会更简单。但是，在这种情况下，我使用了这个解决方法。
当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映在 Web Apps 中。请注意这一点。
您可以在“Redeploying Web Apps without Changing URL of Web Apps for new IDE”的报告中看到详细信息。

如何使用 html 和 google apps 脚本创建具有两个输入字段的表单，这两个字段都需要文件上传？

How to create a form with two input fields where both require file uploads, using html and google apps script?

html

google-sheets

google-apps-script

修改后的脚本：

HTML&Javascript 边:

发件人：

收件人：

Google Apps 脚本端：

发件人：

收件人：

注：