Combine Google.script.run And Javascript Function

I'm building a custom 'Google Forms'-form with a file upload function. The form uses a custom 'Thankyou'-page (see 1st line: iframe). I've found a file upload script that needs to

Solution 1:

• When you click "Send" button,
  • Google Form works fine.
  • document.getElementById('status').style.display = 'inline' works.
  • Function of processForm(frmData) at Google Apps Script doesn't work.
  • Function of updateOutput() at Javascript doesn't work.

If my understanding is correct, how about this modification? Please think of this as just one of several answers.

Modification points:

• In this modification, the file was retrieved using onclick event, while the script for submitting to Google Form is not modified.
• The retrieved file is converted to base64 and sent to Google Apps Script.

Modified script:

HTML:

<formid="myForm"action="https://docs.google.com/forms/d/e/xxx/formResponse"target="hidden_iframe"onsubmit="submitted=true;"><inputplaceholder="1234"name="entry.1234"id="user"type="text"><labelfor="user">User:</label><inputname="picToLoad"type="file"id="sampleFile" /><!-- Modified --><divid="status"style="display: none">
  Uploading. Please wait...
  </div><buttontype="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 = newFileReader();
    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);
  };

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

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

Google Apps Script:

functionprocessForm(theForm) {
  var fileBlob = Utilities.newBlob(Utilities.base64Decode(theForm.data), theForm.mimeType, theForm.fileName);
  var fldrSssn = DriveApp.getFolderById('xxxx');
  fldrSssn.createFile(fileBlob);
  returntrue;
}

Note:

• When the file is selected and click a "Send" button, the file is send to Google Apps Script and is created as a file on Google Drive, while Google Form is submitted. Then updateOutput() at Javascript side is run.
• In this modified script, The blob is used. So the maximum size of a file for uploading is 50 MB. Please be careful this.

Edit 1:

At your comment, it was found that When I remove the id=sampleId from the submit button, the Google Form data is submitted correctly. Using this, please test the following modification.

In this modification, id="sampleId" was removed and the event is triggered using the name of element.

HTML:

<formid="myForm"target="hidden_iframe"onsubmit="submitted=true;"><inputplaceholder="1234"name="entry.1234"id="user"type="text"><labelfor="user">User:</label><inputname="picToLoad"type="file"id="sampleFile" /><divid="status"style="display: none">
  Uploading. Please wait...
  </div><buttontype="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 = newFileReader();
  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);
};

Edit 2:

I updated HTML and Javascript. Please confirm it. Google Apps Script is not modified.

HTML:

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

Javascript:

<script>// This function was modified.functionpicUploadJs(myForm) {
    var file = document.getElementById("sampleFile").files[0];
    const f = newFileReader();
    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);
  }

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