多个、单个输入文件表单字段答案

【问题标题】：Multiple, Single Input File Form Fields多个、单个输入文件表单字段
【发布时间】：2019-02-07 04:16:56
【问题描述】：

我想做什么

当单击“提交”按钮时，我正在尝试运行一个函数，该函数将遍历所有 <input type="file"> 字段并将文件提交到 Google Drive。我修改了原代码HERE。它可以按预期使用单个文件输入字段。

问题

查看以下 02/08/19 的修改

我无法让它适用于多个 <input type="file"> 字段。我试图创建一个函数来确定给定字段是否为空。如果是，请跳过它并继续下一个。我现在拥有的东西不起作用。

其他

按下按钮时整个屏幕变白。不知何故，这在原始形式和我的小修改中有效，但现在不行，我不明白为什么或如何修复它。

更新：我当前在控制台中的错误显示“Uncaught TypeError: Cannot read Uncaught TypeError: Cannot read property 'document' of null.

我的尝试

见HERE或以下。

form.html

   <!doctype html>

<head>
  <style type="text/css">
    body {
      background-color: #FFFFFF;
    }

  </style>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <br>
  <br>
  <br>
  <div align="center">
    <p><img src="ENTER URL"></p>
    <table width="459" border="0">
      <tbody>
        <tr>
          <td width="462">
            <div align="center">
              <hr>
            </div>
            <form id="myForm" align="center">

              <label for="teamName">TEAM</label>
              <select name="teamName" id="teamName" name='teamName'></select>

              <label for="myName">YOUR NAME</label>
              <input type="text" name="myName" placeholder="Your name..">

              <label for="myFile">Passes</label>
              <input type="file" name="myFile" id="passes">
              <label for="myFile">Roster</label>
              <input type="file" name="myFile2" id="roster">
              <input type="submit" value="Upload File" id="clickMe" onclick="clickEvent();">
            </form>
            <div id="output"></div>


            <script>
              google.script.run.withSuccessHandler(buildTeamsList)
                .teams();


              function buildTeamsList(teamsArray) {
                var list = teamsArray;
                //var option = document.createElement('option');
                var option = '';

                for (var i = 0; i < list.length; i++) {
                  option += '<option value="' + list[i] + '">' + list[i] + '</option>';
                }

                $('#teamName').append(option);
                //var select = document.getElementById('teamName');
                //select.appendChild(option);

              }

              function clickEvent() {

                var cE = document.getElementById("clickMe")
                cE.value = 'Uploading...';

                var fileCount1 = document.getElementById("passes").files.length
                console.log(fileCount1);
                var fileCount2 = document.getElementById("roster").files.length
                console.log(fileCount2);
                var x = document.getElementById("clickMe").parentNode;
                //document.getElementById("output").innerHTML =x;

                var y = document.getElementById("clickMe").parentNode;
                //document.getElementById("output").innerHTML =y;

                if (fileCount1 > 0) {
                  google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(x);
                  //.writeToSheet;

                } else if (fileCount2 > 0) {
                  google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles2(y);

                } else {
                  return false;
                }


              };


              function fileUploaded(status) {
                document.getElementById('myForm').style.display = 'none';
                document.getElementById('output').innerHTML = status;
              }

            </script>
            <style>
              input {
                display: block;
                margin: 20px;
              }

            </style>
            <hr>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>&nbsp;</h3>
    <p>&nbsp;</p>
  </div>
</body>

Code.gs

`function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function teams() {

  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('TEAMS');
  var range = sheet.getRange('A2:A1000');
  var values = range.getValues();

    var array1 = [];

  for (var i = 0; i < values.length; ++i) {

    var column = values[i];
    var colA = column[0];


    if (colA != '') {

      array1.push(colA);
    }
  }

    var teamsArray = [];
  while (array1.length) teamsArray.push(array1.splice(0, 1));
  var lengthDivName2 = teamsArray.length;
  var widthDivName2 = teamsArray[0].length;



  Logger.log(teamsArray);
  return teamsArray;

}

function writeToSheet(form) {
  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('submissions');
  var range = sheet.getRange('A2');

  range.setValue(form.myName);

}

function uploadFiles(form) {

  try {

    var dropbox = "Check In Test";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile; 

    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.teamName+ " - Passes");

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

function uploadFiles2(form) {

  try {

    var dropbox = "Check In Test";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile; 

    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.teamName + " - Roster");

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

旁注

如果有人有办法，我可以创建我的<select> 值列表 (function buildTeamsList(teamsArray)) 没有 JQuery，那就太好了。您可以看到上面我已注释掉的行。
很明显，我是科学怪人，但我并没有了解这一切是如何运作的；耐心等待。
我还尝试了您在HERE 中看到的单个字段中的多个文件，但问题是我无法弄清楚如何重命名 Code.gs 中的文件，而我可以使用此代码。因为我最终想将数据写入电子表格，所以知道如何做到这一点（就像我可以使用这段代码一样）很重要。

编辑

按照 Tanaike 的建议，我更改了函数以包含括号。
我做了一些进一步的挖掘，再次根据 Tanaike 的建议，发现有要传递给函数的参数。原来是(this.parentNode)。
我试过了，但还是不行。
我尝试选择提交按钮（表单）的.parentNode。我当前在控制台中的错误显示"Uncaught TypeError: Cannot read Uncaught TypeError: Cannot read property 'document' of null.

【问题讨论】：

虽然我不确定您要为 GAS 函数提供的参数，但在您的脚本中，为了运行 GAS 函数，请修改为 google.script.run.withSuccessHandler(fileUploaded).uploadFiles(); 和 google.script.run.withSuccessHandler(fileUploaded).uploadFiles2();。请将() 添加到两个函数名称中。
啊，我确实错过了，以及传递的参数。最初它是uploadFiles(this.parentNode); 那也不起作用。同样，控制台中没有错误。单击按钮时，屏幕只会变为白色。我应该通过什么论据来完成这项工作？我更新了我的问题和小提琴jsfiddle.net/nateomardavis/je80h6sk/5
你应该传递表单节点。 this 在您的脚本中指的是什么？
我更新了问题和我的代码。基本上，我尝试选择提交按钮（表单）的.parentNode。我收到了这个错误：Update: My current error in the console shows "Uncaught TypeError: Cannot read Uncaught TypeError: Cannot read property 'document' of null.
哪一行？另外，为什么不只是document.getElementById('myForm')？

标签： javascript html google-apps-script

【解决方案1】：

对于任何可能遇到此问题的人。我可以通过更改服务器端（code.gs）函数uploadFiles(form) 来完成这项工作。现在，表单上的一个按钮和一个功能从两个文件输入中收集。

https://jsfiddle.net/nateomardavis/kdpjo4s9/2/

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');

}

function teams() {

  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('TEAMS');
  var range = sheet.getRange('A2:A1000');
  var values = range.getValues();

  var array1 = [];

  for (var i = 0; i < values.length; ++i) {

    var column = values[i];
    var colA = column[0];


    if (colA != '') {

      array1.push(colA);
    }
  }

  var teamsArray = [];
  while (array1.length) teamsArray.push(array1.splice(0, 1));
  var lengthDivName2 = teamsArray.length;
  var widthDivName2 = teamsArray[0].length;



  Logger.log(teamsArray);
  return teamsArray;

}

function writeToSheet(form) {
  var ss = SpreadsheetApp.openById('MYID');
  var sheet = ss.getSheetByName('submissions');
  var range = sheet.getRange('A2');

  range.setValue(form.myName);

}

function uploadFiles(form) {

  try {

    var dropbox = "Check In Test";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;

    var file = folder.createFile(blob);
    file.setDescription("Uploaded by " + form.myName);
    file.setName(form.teamName + " - Passes");

    var blob2 = form.myFile2;

    var file2 = folder.createFile(blob2);
    file2.setDescription("Uploaded by " + form.myName);
    file2.setName(form.teamName + " - Roster");

    return "File uploaded successfully " + file.getUrl() + " and " + file2.getUrl();

  } catch (error) {

    return error.toString();
  }

}

【讨论】：