JavaScript input fileのキャンセル

input type=fileでキャンセルが押された場合にオブジェクトを破壊したいです
addEventListenerで探知はできないようなのですが、
この場合どのように参照押したあとにキャンセルされたか判定すればいいのでしょうか？
下記ではダメでした

input.addEventListener("change",function(){
if(this.value==null||this.value==""||!this.value){
this.remove();
}
});

<script>
window.onload=function(){
input=document.createElement("input");
input.type="file";
input.addEventListener("change",function(){
alert("選択");
});
input.addEventListener("canncel",function(){
this.remove();
});
document.body.appendChild(input);
}
</script>

m.ts10806

2021/12/22 19:59 編集

英単語としてはcancel ですが、そういうイベントはないです。その「オブジェクトを破壊したい」というのがどうなっていれば良いのか分からないです。コードからはinput自体を削除しているように見えますが。 →失礼。そもそも元々画面上にない要素をcreateしてるわけですね。

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

回答1件

ベストアンサー

ファイル選択ダイアログをキャンセルした場合の挙動は何通りかありまして、

Firefox では、選択ダイアログを出してキャンセルした場合に cancel イベントが発生します。
ファイルが選択されてない状態で選択ダイアログを出してキャンセルした場合 → Firefox以外では検知不可能です
ファイルが選択されている状態で選択ダイアログを出してキャンセルした場合 → Chrome/Edge だと未選択状態に変わるので、change イベントで this.files.length == 0 になったことをチェックすれば検知できます。Safari だと何も起きないので検知不可能です。

どんな感じのUXにしたいかを書いていただければ別の手段を紹介できるかもしれません。

投稿2021/12/22 23:04

編集2021/12/23 02:41