javascriptのchangeイベント処理の発火条件を追加するには・・・

Question

ローカルファイルのアップロードで、ファイル指定後のchangeイベント発火処理時、ボタンのsubmitのclickイベントが発火したらrun関数の中を実行させたいです。。

submitクリック後、run関数の変数のobjが変でうまくアップロードできません。

どなたかご存じでしょうか？

    <form><input name="file" id="uploadfile" type="file" /></form>
    <div id="progress"></div>
    <div><button type="submit" id="teisyutsu_id" style="margin-top:30px;">提出する</button></div>

      document.getElementById("teisyutsu_id").addEventListener("click",submitForm,false);
      
      function submitForm(e) {
        document.getElementById("progress").innerText = "Start";
      }
      document.getElementById("uploadfile").addEventListener("change", run, false);
      // document.querySelector('form').addEventListener('submit', run);

      function run(obj) {
        if (document.getElementById('progress').innerText == 'Start') {
          google.script.run
            .withSuccessHandler((accessToken) =>
              ResumableUploadForGoogleDrive(accessToken, obj)
            )
            .getAuth();
        }
      }

Comments

[yambejp]

ファイルのアップロードは最低限methodとenctypeの指定が必要です
submitをformに含めない場合はform属性が必要です

[int32_t]

change イベントと click イベントが同時に発火することはあり得ません。欲しい動作はどんなものなんでしょうか?

[rena_168]

アップロードファイルを指定（changeイベント発火）後、ボタンクリックした後に、正式にファイルのアップロード処理（run関数）を実行させたいです。現状は、changeイベント発火後すぐにrun関数が実行されます。

[yambejp]

回答しましたがchangeイベントで何かをする必要はなくrequiredだけつけておけば
changeされないかぎりファイルは空なのでサブミットしてもエラーになってくれます

Answer 1

run() は <form>の submitイベントに登録して、<input type=file> に required 属性を付けてファイルを指定しないと送信できないようにするのはどうでしょうか。

<input name="file" id="uploadfile" type="file" required/>

document.querySelector('form').addEventListener('submit', run);

Answer 2

本当の解決にはならず、結局ファイル選択後すぐイベント発火のままで終わらせました。
皆さん、色々とありがとうございました！

Answer 3

type=fileのchangeイベントが発生しないとsubmitできない仕様にしたいなら
たんにtype=file要素にrequiredをつけるだけで良いのでは？

Answer 4

引数ごとに何が入るのか、などconsole.logなどを使い、
確認しながら構文を組むようにしましょう。
コメントにあります、targetを取得したいなら、下記になるかと。

document.getElementById("teisyutsu_id").addEventListener("click",submitForm,false);

function submitForm(e) {
  document.getElementById("progress").innerText = "Start";
}

document.getElementById("uploadfile").addEventListener("change", e => {
  // 引数eには、イベントオブジェクトが入る。その中に、targetというプロパティが存在する
  run(e);
}, false);

function run(obj) {
  if (document.getElementById('progress').innerText == 'Start') {
    google.script.run
      .withSuccessHandler((accessToken) =>
        ResumableUploadForGoogleDrive(accessToken, obj)
      )
      .getAuth();
  }
}

-------- 以下元回答 --------
クロージャを使えばよいかと。
（一応、callメソッドで、イベント発火要素を取得できるようにしてます）

document.getElementById("uploadfile").addEventListener("change", function(){
  run.call(this);
}, false);

document.getElementById("teisyutsu_id").addEventListener("click", function(){
  run.call(this);
}, false);

Comments

[rena_168]

わー、callも初めてみるので、試してみます！
ありがとうございます！

[rena_168]

以下のエラーが出ました。
Cannot read property 'target' of undefined
Googleドライブへのアップロードだから、普通とちょっと違いますかね？！

[miyabi_pudding]

それは、質問者さんの構文が今どういう状態なのか（特にrun関数の中身）わからないと、回答しようがありません。
汎用性を持たせているわけではないので。

[miyabi_pudding]

質問のコードの修正いただいてましたね・・・。
やりたいことが見えてきたので、回答修正します。

Answer 5

Event.preventDefault()のことでしょうか？
JsFiddle-kszL5dae

Answer 6

function run(){
  document.getElementById('teisyutsu_id').click();
}

のことでしょうか？

Comments

[rena_168]

回答ありがとうございます。
このクリックをif文にして、run関数の中の処理を実行させたいですが、可能でしょうか？