独自デザインにした input type="file" で参照しているファイルをクリアする

input type="file" を独自デザインにして、参照しているファイル名のところを非表示にしているとき、場合によってはうまく動作しないときがある。

input type="file" は通常、参照しているファイルのファイル名が表示される UI があり、そこをクリックしてから esc や backspace を押すことで参照を解除できる。 参照が解除されていない状態で同一のファイルを参照しようとしてもなにもイベントは発火しない。

ので、もし submit をする前に、サービス独自で「添付前の確認モーダルを表示する」であるとか、なにかしらのアクションを行っている場合はすでに参照されているファイルと同じファイルを再度参照しようとした場合、アクションは起きない。 もしそのモーダルに submit がついていたら悲惨。

厄介なのは input file で参照しているファイルにはアクセスできないため、意図的に参照しているファイルを削除するようなことはできない。 なので「input を良きタイミングで毎回再描画する」という処理を入れないといけない。

React の場合は再描画したいタイミングで unixtime を生成して setState する。 input 要素の key に生成した unixtime を入れてあげれば最小限のパフォーマンス低下で対応できる。

静的な HTML の場合は DOM の再描画😇

form 系はハック的なデザインの変え方をしていると絶対こういうことになる(自戒)