input type=file要素を使用した際にファイルを選択したかしてないかによる条件分岐処理を実装することは可能でしょうか？

Question

前提・実現したいこと

<input type="file">を使用した際にファイルを選択ボタンを押すとファイル選択のウィンドウが開き、このウィンドウでファイルを選択して「開く」ボタンを押す場合と「キャンセル」ボタンを押す場合で実装を分岐させたいのですが、このタイミングで条件分岐する処理を実装することは可能でしょうか？
試しに以下のような記述をしてみましたが不可でした。
何か方法をご存知の方いらっしゃいましたらお教えいただければと思います。
よろしくお願いいたします。
(jQueryタグをつけてはいますが有無問いません)

試したこと

<input id="input-elm" type="file">

$('#input-elm').on('change', function(){
    if($(this).val().length !== 0){
        開くを押されファイルが選択されたときの処理
    }else{
        キャンセルを押された時の処理
    }
});

補足情報

こちらの質問に関連して再度質問させていただきました。
https://teratail.com/questions/324450

Answer 1

ファイル選択ダイアログのキャンセルを検知することは、不可能です。

HTML規格に対しても要望が上げられています。
[whatwg/html:3976] Provide open/close events (or equivalent) for dialog popups, such as <input type=file>

Comments

[janhampino]

お返事遅れており申し訳ございません。
課題一通り読ませていただきました。
おっしゃる通りジャストでのイベント検知は残念ながらできないようですね。
個人的には何度も必要な場面に出会したので欲しい機能ではあります...
その他の方の回答コメントもとても参考になりました。
実装の際の相談でまた出てきそうな課題なので現状こうなんだよということはこちらの記事を元に知識としてストックさせていただきます！
有益な情報とご回答ありがとうございました！

Answer 2

こちらを参考にされるとよいかと

• entsukablog

※微妙な時差をつけないと拾えないのはなんとなく気持ち悪いですけどね

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const body=document.querySelector('body');
const file=document.querySelector('#input-elm');
file.addEventListener('click',()=>{
body.onfocus=()=>setTimeout(() => {
if (file.value.length) {
console.log("ok");
} else {
console.log("cancel");
}
body.onfocus=null;
}, 500);
});
});
</script>
<input id="input-elm" type="file">

[janhampino]

お返事遅れまして申し訳ありません。
ご回答並びに参考記事までありがとうございます！
書いていただきましたコードを元にこちらの環境でも実行したところ無事キャンセルの処理取得できました。
本当にありがとうございます！
以前にも同じ問題にぶつかったことがあったので(その際は実装を変更し他の方法でなんとか切り抜けましたが...)次回以降も必要な際は活用させていただきたいと思います。
とても助かりました。
探していた実行結果だったためベストアンサーとさせていただきます。