onClickからaddEventListenerに変換した際、引数はどれを入れたらよろしいでしょうか？

現在、Googleスプレットシートにモーダルダイアログを開いて、そこからCSVのデータをアップロードするスクリプトを組んでおります。
参考にしているサイトは以下のところです。
https://tonari-it.com/gas-dialog-file-blob/

ここではコード.gsに定義した関数をindex.htmlで呼ぶように組んでおります。

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <form>
8      <input name="myFile" type="file">
9      <button onclick="google.script.run.uploadCsv(this.parentNode);">アップロード</button> 
10    </form>
11  <script>
12  </script>
13  </body>
14</html>

ただ、ここで書かれている方法はボタンタグに直接関数を差し込んでいるものであり、今のコーディングガイドラインでは即しないと思いました。
そこでイベントリスナーに差し替えようとした。

index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5  </head>
6  <body>
7    <form>
8      <input name="myFile" type="file" />
9      <button id='uploader'>アップロード</button>
10    </form>
11    <script>
12      const btn = document.querySelector('#uploader');
13      
14      btn.addEventListener('click', (e) => {
15        google.script.run.uploadCsv(e.parentNode);
16      });
17    </script>
18  </body>
19</html>

この状態でアップロードを実行したのですが動作せず、ログを確認したところ以下のエラーが発生したのをcatchしました。

エラー内容: TypeError: Cannot read property 'myFile' of null

uploadCsvに何を渡せばよろしいでしょうか？

今回、あまり関係が薄いですがGAS側はこのように定義しております。

const ss = SpreadsheetApp;

const showDialog = function(){
  const html = HtmlService.createHtmlOutputFromFile('index');
  ss.getUi().showModalDialog(html, "CSVアップローダー");
}

const uploadCsv = function(form){
  try{
    const blob = form.myFile;  //addEventListenerに書き換えたコードではここのmyFileがnullだった
    Logger.log("アップロードファイル名: " + blob.getName());
  }catch(e){
    Logger.log("エラー内容: " + e);
  }
}

行動規範の内容に同意します

回答2件

ベストアンサー

javascript
1btn.addEventListener('click', function(e) {
2  google.script.run.uploadCsv(e.target.parentNode);
3});

ではないですか？

投稿2020/07/08 02:55

yambejp

総合スコア116724

yambejp

2020/07/08 02:57

このparentNodeはformを指しているのですかね？要素からformを指定するなら e.target.formとかにしないと、HTMLの構造が変わったときに拾えなくなりますね

zigutabi

2020/07/08 03:28

すみません、こちらもHTML側でコケているようです。

zigutabi

2020/07/08 04:18 編集

う～ん、ChomeV8を無効にしたら動きました。なんかコード上の問題ではなく、GAS側の不具合によってLogger.logが動いていないようです。しばらく様子見してみます。

行動規範の内容に同意します

js
1      const btn = document.querySelector('#uploader');
2
3      btn.addEventListener('click', function(e) {
4        google.script.run.uploadCsv(this.parentNode);
5      });