Uploading a file using an HtmlService form in Google Apps always causes "server error" and a stack trace

Quote :

I am trying to make a script for my Google spreadsheet in which I upload an XML file and process its data. I am able to create a form, display it in a modal dialog, but I get a strange error when I attempt to submit a form with a file: Nothing is logged for the error in Stackdriver Error Reporting. However, the web browser console logs the following error message:

Error: We're sorry, a server error occurred. Please wait a bit and try again.

The error message comes with a stack trace:

Zd https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:56
    bf https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:71
    G https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:15
    J https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:99
    Id https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:47
    Ed https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:48
    b https://n-z7hx4jjtvixobmaqkddve7tkcdyndjsnh3plmfq-0lu-script.googleusercontent.com/static/macros/client/js/2745927008-mae_html_user_bin_i18n_mae_html_user__en_gb.js:44

Of course, the stack trace doesn't help here, as it points to a huge minified JavaScript file on Google's servers.

I have tried replicating the examples in the current Google Apps documentation as well as a few old and recent examples I could find on StackOverflow, and the issue is always the same: When comes the time to submit the form data, the script crashes.

I know that this is specifically caused by the file input field. If I remove it, I'm able to submit the form and process its data. If I add the file input field, I get the error as soon as I submit the form.

I can tell the issue is not the file. I have tried uploading a big (125 kb) text file at first, followed by one a few bytes in size, and even not submitting any file at all, and I get the same error. I'm encountering this issue on both Chrome and Firefox, on two separate Google accounts.

Here is my Google script. The updateTracker method is called when clicking on a drawing object that I placed in the spreadhseet.

function updateTracker()
{  
  var thisUI = SpreadsheetApp.getUi();
  var htmlUpdatePage = HtmlService.createHtmlOutputFromFile('myPage');
  var updatePrompt = thisUI.showModalDialog(htmlUpdatePage, 'Update');
}

function digestXml(theForm) {
  //var fileBlob = theForm.xmlFile;
  var thisUI = SpreadsheetApp.getUi();
  thisUI.alert("Test");
}

Here is my HTML file, "myPage":

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      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 submitXml(objForm)
      {
        google.script.run.withSuccessHandler(updateUrl).digestXml(objForm);
      }
      function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = 'Got it!';
      }
    </script>

  </head>
  <body>
    <form id="xmlForm" onsubmit="submitXml(this)">    
      <input type="file" value="Browse" name="xmlFile" />
      <input type="submit" value="Digest" />
    </form>
    <div id="output"></div>
  </body>
</html>

I can tell that the issue occurs precisely when trying to pass objForm from the HTML to the Google Script. I'm able to write to the console right before the line google.script.run.withSuccessHandler(updateUrl).digestXml(objForm); in HTML, but I don't get to thisUI.alert("Test"); in the Google Script. If I remove the parameter objForm from digestXml() in the HTML, the crash does not occur.

Quote :

It appears that the issue only occurs in a recently released version of Google App's scripting interface, "V8".

When I create a script, I am prompted to use this version of their scripting interface. Trusting Google to test their functionalities, I accepted without thinking.

If I edit my script's configuration file to use STABLE instead of V8, I do not encounter the issue. If you're having this issue, here's how to do that:

Open the Script Editor.
In the top menu, select View > Show manifest file.
In the files list, open appsscript.json.
Replace "runtimeVersion": "V8" with "runtimeVersion": "STABLE"
Save.

This is however alarming as I presume the current stable version will be deprecated eventually in favor of V8. I logged an issue for this: https://issuetracker.google.com/issues/149980602

Uploading a file using an HtmlService form in Google Apps always causes "server error" and a stack trace

Guess you like