Today, I discussed with Riël Notermans an issue with the HTML form with the input tab of type="file" with google.script.run. Through this discussion, the reason for this issue could be found. When you use the input tab of type="file" in the HTML form, and you want to send the file content with google.script.run, I thought that this post might be useful for other users. So, I posted it here.
A simple sample script for replicating this issue is as follows.
Sample script
Google Apps Script Code.gs
When a dialog is used, the following script can be used for testing this situation. In this sample, a Spreadsheet is used. So, please copy and paste the following script to the script editor of Spreadsheet.
function openDialog() {
const html = HtmlService.createHtmlOutputFromFile("index");
SpreadsheetApp.getUi().showModalDialog(html, "sample");
}
function sample(e) {
console.log(JSON.stringify(e));
}
When the Web Apps is used, the following script can be used for testing this situation.
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
function sample(e) {
console.log(JSON.stringify(e));
}
HTML index.html
<form>
<input type="file" name="file" />
<input
type="button"
id="submit"
value="ok"
onclick="google.script.run.sample(this.parentNode)"
/>
</form>
Testing
In the above script, please open the HTML, and click “ok” button. By this, you can see an error like TypeError: Cannot read properties of null (reading 'closure_lm_###') in the console of the browser. This error occurs with both select file and selects no file.
Under this condition, please modify the above HTML as follows.
-
From:
<input type="button" id="submit" value="ok" onclick="google.script.run.sample(this.parentNode)"> -
To:
<input type="button" id="sampleId" value="ok" onclick="google.script.run.sample(this.parentNode)">
When this modified HTML is tested, even when you click “ok” button, no error occurs. And also, in this case, when the following HTML form also occurs the same error.
<form>
<input type="file" id="submit" name="file" />
<input
type="button"
id="sampleId"
value="ok"
onclick="google.script.run.sample(this.parentNode)"
/>
</form>
By the way, in this case, when type="file" is changed to type="text", <input type="button" id="submit" value="ok" onclick="google.script.run.sample(this.parentNode)"> works fine without the error. I think that this is also important information.
From this situation, it is considered that in this case, when the file input tab is used, when id="submit" is used, the form object cannot be correctly parsed with google.script.run.
Summary
From this test, it was found that when the input tab of type="file" is used in the HTML form and the file content is sent to Google Apps Script side with google.script.run, in the current stage, id="submit" cannot be used. Namely, this indicates that there are reserved words when the HTML form object is sent with google.script.run. I’m worried that there might be words except for submit in the reserved words.
I believe that this will be resolved in the future update.