inputタグのchangeイベントをキャッチする時に、「同じファイルを選択する」時changeイベントが発火しない問題がありました。
これは、1度目の選択で選ばれたものがeventのvalueに入ってしまってる事により 
反応しないという理由でした。
超超簡易サンプルコード
<div class="code-block-container">
<div class="code-block-filename-container">html</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Document&lt;/title&gt;
 &lt;style&gt;&lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type='file' id='file-input'&gt;&lt;/input&gt;
 &lt;script src="./index.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">js</div>
<pre class="language-js"><code class="language-js">(() =&gt; {
 const input = document.getElementById('file-input');
 input.addEventListener('change', () =&gt; {
 console.log('change');
 })
})();
</code></pre>
</div>ここで、inputのボタンで2回同じファイルを選択します。 
そうすると2回目の選択時には、「change」がコンソールに表示されないと思います。
なので、以下のようにeventに含まれるvalueを空にすることで解消されます。
<div class="code-block-container">
<div class="code-block-filename-container">js</div>
<pre class="diff-highlight language-diff-js"><code class="diff-highlight language-diff-js">(() =&gt; {
 const input = document.getElementById('file-input');
+ input.addEventListener('click', (e) =&gt; {
+ e.target.value = '';
+ })
 input.addEventListener('change', () =&gt; {
 console.log('change');
 })
})();
</code></pre>
</div><h1 id="%E5%90%8C%E3%81%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E9%81%B8%E3%81%B0%E3%81%AA%E3%81%8F%E3%81%AA%E3%81%84%EF%BC%9F">
<a class="header-anchor-link" href="#%E5%90%8C%E3%81%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E9%81%B8%E3%81%B0%E3%81%AA%E3%81%8F%E3%81%AA%E3%81%84%EF%BC%9F" aria-hidden="true"></a> 同じファイル選ばなくない？</h1>
同じファイルを選択する必要は本来であればあまりないように思います。
しかし、選択されるたびに選択されたファイルに関するダイアログなどをchangeイベントをトリガーに表示する際、一度ダイアログの中でキャンセルしたとしても、inputの中にはファイルの情報が格納されてしまいます。
もし次に同じファイルを選択して、ダイアログを表示させたいとしても、選択されたファイルと同じだとchangeイベントが発火しないので、ダイアログが表示されないなどのユースケースがありました。
そのため、こういった初期化処理を挟む事で解消が必要になってきます。
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<iframe id="zenn-embedded__262890bb13d23" src="https://embed.zenn.studio/card#zenn-embedded__262890bb13d23" data-content="https%3A%2F%2Frennnosukesann.hatenablog.com%2Fentry%2F2018%2F05%2F23%2F082920" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://rennnosukesann.hatenablog.com/entry/2018/05/23/082920" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://rennnosukesann.hatenablog.com/entry/2018/05/23/082920</a>

inputのfileで2回同じものを選択するとchangeが効かない

Discussion