How to create a form with two input fields where both require file uploads, using html and google ap-CodePudding

I'm trying to request users to upload files in two separate fields by adapting codes from here (https://www.bpwebs.com/upload-files-to-google-drive-with-google-apps-script/). It works only in the form with one file field. Can anyone point out my mistakes? It seems like uploadFiles() function can't take in two elements of type file? I tried but this is way beyond my capability. Thanks in advance!

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>

CodePudding user response：

In your situation, how about the following modification?

Modified script:

HTML&Javascript side:

In this modification, please modify your HTML function as follows.

From:

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

To:

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

Google Apps Script side:

In this modification, please modify your uploadFiles function as follows.

From:

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'")]);

To:

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'")
]);

Note:

In December 2021, at V8 runtime, the form object including the file object got to be able to be correctly parsed from Javascript to Google Apps Script. Ref The bug has been resolved. It seems that about the file object, in the current stage, the object can be created as a file using createFile method. But, unfortunately, it seems that the file content cannot be directly retrieved from the form object. So, as a workaround, after the file was created as a file from the parsed form object, I used the method for checking the file size and the filename. If an error like Forms with file inputs must be the only parameter. doesn't occur, when 2nd argument can be used like google.script.run.uploadFiles(formObject, arg2), the process can be simpler. But, in this situation, I used this workaround.
When you modified the Google Apps Script, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful this.
You can see the detail of this in the report of "Redeploying Web Apps without Changing URL of Web Apps for new IDE".