Объедините функцию google.script.run и javascript

• Когда вы нажимаете кнопку «Отправить»,
  • Гугл форма работает нормально.
  • document.getElementById('status').style.display = 'inline' работает.
  • Функция processForm(frmData) в Google Apps Script не работает.
  • Функция updateOutput() в Javascript не работает.

Если я правильно понимаю, как насчет этой модификации? Пожалуйста, подумайте об этом как об одном из нескольких ответов.

Точки модификации:

• В этой модификации файл получен по событию onclick, при этом скрипт отправки в Google Form не изменен.
• Полученный файл конвертируется в base64 и отправляется в Google Apps Script.

Модифицированный скрипт:

HTML:

<form id = "myForm" action = "https://docs.google.com/forms/d/e/xxx/formResponse" target = "hidden_iframe" onsubmit = "submitted=true;">
  <input placeholder = "1234" name = "entry.1234" id = "user" type = "text">
  <label for = "user">User:</label>
  <input name = "picToLoad" type = "file" id = "sampleFile" /> <!-- Modified -->
  <div id = "status" style = "display: none">
  Uploading. Please wait...
  </div>
  <button type = "submit" name = "action" id = "sampleId" >Send</button> <!-- Modified -->
</form>

Javascript:

<script>
  // Below script was added.
  document.getElementById("sampleId").onclick = function(e) {
    e.stopPropagation();
    e.preventDefault();
    var file = document.getElementById("sampleFile").files[0];
    const f = new FileReader();
    f.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      picUploadJs(obj);
    }
    f.readAsDataURL(file);
  };

  function picUploadJs(frmData) {
    document.getElementById('status').style.display = 'inline';
    google.script.run.withSuccessHandler(updateOutput).processForm(frmData)
  };

  function updateOutput() {
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }
</script>

Скрипт Google Apps:

function processForm(theForm) {
  var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
  var fldrSssn = DriveApp.getFolderById('xxxx');
  fldrSssn.createFile(fileBlob);
  return true;
}

Примечание:

• Когда файл выбран и нажата кнопка «Отправить», файл отправляется в Google Apps Script и создается как файл на Google Диске во время отправки формы Google. Затем запускается updateOutput() на стороне Javascript.
• В этом модифицированном скрипте используется блоб. Таким образом, максимальный размер файла для загрузки составляет 50 МБ. Пожалуйста, будьте осторожны с этим.

Редактировать 1:

По вашему комментарию выяснилось, что When I remove the id=sampleId from the submit button, the Google Form data is submitted correctly. Используя это, проверьте следующую модификацию.

В этой модификации убрали id = "sampleId" и событие запускается по имени элемента.

HTML:

<form id = "myForm" target = "hidden_iframe" onsubmit = "submitted=true;">
  <input placeholder = "1234" name = "entry.1234" id = "user" type = "text">
  <label for = "user">User:</label>
  <input name = "picToLoad" type = "file" id = "sampleFile" />
  <div id = "status" style = "display: none">
  Uploading. Please wait...
  </div>
  <button type = "submit" name = "action">Send</button> <!-- Modified -->
</form>

Javascript:

var button = document.getElementsByName('action')[0]; // Modified
button.onclick = function(e) { // Modified
  e.stopPropagation();
  e.preventDefault();
  var file = document.getElementById("sampleFile").files[0];
  const f = new FileReader();
  f.onload = (e) => {
    const data = e.target.result.split(",");
    const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
    picUploadJs(obj);
  }
  f.readAsDataURL(file);
};

Редактировать 2:

Я обновил HTML и Javascript. Пожалуйста, подтвердите. Сценарий Google Apps не изменен.

HTML:

<iframe name = "hidden_iframe" id = "hidden_iframe" style = "display:none;" onload = "if (submitted)  { picUploadJs(myForm); }"></iframe>
<form id = "myForm" action = "https://docs.google.com/forms/d/e/xxx/formResponse" target = "hidden_iframe" onsubmit = "submitted=true;">
  <input placeholder = "1234" name = "entry.1234" id = "user" type = "text">
  <label for = "user">User:</label>
  <input name = "picToLoad" type = "file" id = "sampleFile" /> <!-- Modified -->
  <div id = "status" style = "display: none">
  Uploading. Please wait...
  </div>
  <button type = "submit" name = "action">Send</button>
</form>

Javascript:

<script>
  // This function was modified.
  function picUploadJs(myForm) {
    var file = document.getElementById("sampleFile").files[0];
    const f = new FileReader();
    f.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      document.getElementById('status').style.display = 'inline';
      google.script.run.withSuccessHandler(updateOutput).processForm(obj);
    }
    f.readAsDataURL(file);
  }

  function updateOutput() {
    var outputDiv = document.getElementById('status');
    outputDiv.innerHTML = "The File was UPLOADED!";
    window.location='https://thankyoupage/';
  }
</script>