【JavaScript・TypeScript】同じファイル選択でchangeイベントをトリガーさせる方法【技術メモ】

どうも、こんにちは。widen uno（@widen_uno）です。

同じファイルを選択した場合、changeイベントがトリガーされてない！どうすればいいの？

JavaScriptやTypeScriptでウェブアプリケーションを実装している時に、「同じファイルを選択するとchangeイベント、onchangeイベントがトリガーされていない！」と言う問題に直面したため、技術メモシリーズとして簡単に解決策をご紹介します。

ブログで収益化していきたい方はGoogleアドセンスについてチェックしてみてください！

なんでトリガーされないの？

入力値が変更されることで発火されるイベントが、changeイベントです。

しかし、同じファイルを選択するとイベントはトリガーされません。

ブラウザが「あ、同じファイルね！」といった感じで、無視してしまうためです。

そこで、changeイベント内のvalueを空にしてあげる必要があります。

以下に、JavaScript・jQuery・Angularでの解決策を記載いたします。

JavaScriptの解決策は以下です。

changeイベント時にfileのvalueを空にします。

<!-- hoge.html -->
<input id="file" type="file" onchange="onChange()"/>

function onChange() {
 // ・・・
 document.getElementById("file").value = '';
}

jQueryの解決策は以下です。

通常のJavaScript同様に、changeイベント時にfileのvalueを空にします。

<!-- hoge.html -->
<input id="file" type="file"/>

$('#file').change(function(){
 // ・・・
 $(this).val('');
});

Angularの解決策は以下です。

通常のJavaScript同様に、changeイベント時にfileのvalueを空にします。

<!-- hoge.html -->
<inputtype="file" #file (change)="onChange()" />

// hoge.ts
@ViewChild('file') file: any;
//・・・
onChange() { 
  this.file.nativeElement.value = ''; //valueを空にする
}

JavaScriptを学び始めた方から中級エンジニアの方には「JavaScript コードレシピ集」がすごく最適です。

現場で良く使われるテクニックから、上級エンジニアが使う技まで学ぶことができます。

Kindleでも読むことができるため、下記にAmazonのリンクを貼っておきます。

Angularを学びたい方には、「Angularアプリケーションプログラミング」一択だと思います。

日本語対応のAngularに関する書籍や情報は貴重です。

これひとつあるだけで、学習本かつ辞書になると思います。

こちらもKindleでも読むことができるため、下記にAmazonのリンクを貼っておきます。

知らないと意外と戸惑う部分であるため、簡単に技術メモとして残しておきました。

ぜひ参考にしてみて下さい。

ブログで本格的に収益化していきたい方におすすめなアフィリエイトHowTo本はこちらです！

ぜひ合わせて読んでみて下さい。