SPAで<input type=file>要素を使い回す場合はvalueをクリアしましょう
先に結論だけ
input type="file"要素は選択されたファイルの情報を保存します。まったく同じファイルを選択した場合、input要素はchangeおよびinputイベントを発行しません。input要素のvalue属性に"" 空文字を設定すると選択状態がクリアされ、input要素は再度イベントを発行します。
はじめに
この記事はinput type="file"要素の選択状態とイベント発行について記録、共有するためのものです。
シングルページアプリケーションで、fileタイプのinput要素をファイルオープンコマンドとして利用したところ、イベントが発行されず詰まりました。fileタイプのinput要素について誤解していた点と、解決手順を整理します。
問題発生の経緯
ローカルファイルを開き、編集を加えるシングルページアプリケーションを開発します。
ファイルオープンコマンドとしてfileタイプのinput要素を利用します。input要素のchangeイベントをトリガーにしてファイルを開き編集します。
編集状態を破棄してもう一度ファイルを開こうとしたとき、input要素からイベントが発行されないことに気がつきました。この問題は、編集状態を破棄する前と後で同じファイルを開くときのみ発生し、別のファイルを開くときは正常に動作します。
問題の分析と解決
この問題は、同一ファイルをinput要素に連続して与えるとイベントが発行されない事が原因です。
マルチページアプリケーションの場合
マルチページアプリケーションでは、ユーザーはお問い合わせフォームのような一連のinputフォームを入力し、最後にsubmitボタンを押します。JavaScriptはsubmitボタンが押されてから、すべてのフォームの入力値をあつめてサーバーに送信し、送信前ページなど次のページに遷移します。
このページ遷移のタイミングでinput要素はすべて破棄されるため、開発者はフォームの再利用を考える必要がありません。ページの遷移に伴いフォームがクリアされる点を失念したため、この問題が発生しました。
シングルページアプリケーションの場合
シングルページアプリケーションでは、ユーザーがinput要素に値を入力したらJavaScriptはイベントに応じてそのたびに反応を返します。input要素は、入力値が再び必要になった場合に備えてvalue属性に入力値をため込んでいます。input要素はvalue属性値と同じ値を入力された場合、changeおよびinputイベントを発行しません。
解決方法
ため込んだ値をクリアすれば、input要素は再びイベントを発行します。fileタイプのinput要素の場合、value属性に空文字""を代入すれば値がクリアされます。
以上、ありがとうございました。
参考記事
