【JavaScript】input type=file のキャンセルイベント取得方法

どうも、えんつかです！
ぼちぼちプログラミングやっております。

本日は、調べても関連記事を全然ヒットさせることができず、解決策に困り最終的にHACK的に解決した方法を紹介したいと思います！

【JavaScript】input type=file のキャンセルイベント取得方法

結論、以下のコードでキャンセルイベントを取得できるようになります。

<input type="file" id="_file" onClick="openFile()" />
<script src="./index.js"></script>

const inputFile = document.getElementById("_file");

function openFile() {
  document.body.onfocus = getEvent;
}

function getEvent() {
  setTimeout(() => {
    if (inputFile.value.length) {
      console.log("ファイル選択イベント取得 !!");
      alert('Select Fire');
    } else {
      console.log("ファイルキャンセルイベント取得 !!");
      alert('Cancel Fire');
    }
    document.body.onfocus = null;
  }, 500);
}

やったぜ！！

英語でググるとこちらの記事がヒットしたのですが、input[type=file]のキャンセルイベントの取得に関する記事が書かれていますが、ちゃんとキャンセル時のイベントを取得できていないんですよね…

そこに、HACK的な手法になってしまいますが、setTimeoutを書き加えることで、うまく動作させることができるようになりました！(時間は適宜設定)

強強エンジニアの方に相談して速攻解決しました。凄すぎ。これは思いつきませんでした。

もし、どうしてもキャンセルイベントを取得してみたい場合に利用してみてください！

こちらに動作している状態を埋め込んでみたので、確認することができます！

…ただ、どうやら上のコードだとFirefox上でうまく動作しないことがあるようです。
Firefoxでは、onfocusではなくonmousemoveで取得して、判定させてあげましょう！

以上です。ほんじゃ〜ね。