サムネ付きで削除可能なファイルフォームの状態確認シート

いつも混乱するのでまとめておこうと思います。

前提

<input type=file name=logo_image /> <!-- （１） -->
<figure id=thumb_logo_image><img/></figure> <!-- （２） -->
<input type=hidden name=remove_logo_image value=on /> <!-- （３） -->
<button id=btn_remove_logo_img /> <!-- （４）-->

• こんな要素があるとします
• 保存済みのファイルがある場合は（２）にサムネが表示されるものとします
• ファイルを選択した直後もJSで（２）にサムネをセットするものとします
  • ※サーバーにはまだ送っていない状態
• remove_属性名 に値をセットして送れば保存済みのファイルが削除ができる実装だとします
  • 削除フィールドに値があったまま新しいファイルを送信してもきちんと新しいファイルに交換される実装になっているものとします
• （４）の削除用のボタンが押されると、（２）サムネ、（３）削除用フィールド、（４）削除用ボタンがHTMLから消えると想定します

状態の洗い出し

• 保存済みのファイルがあるかないか
• 新しいファイルが選択されているかいないか
• ファイル選択ダイアログを出したあとに「キャンセル」ボタンで戻ったかどうか
• 削除用のボタンが押されたか押されていないか
• 削除用のボタンが押された後にまたファイル選択をしたかどうか
• 保存済みのファイルがある状態で新しいファイルを選択したが、新しいファイルはキャンセルした場合

状態変数の洗い出し

• Object savedValue
  • 保存済みのファイル
• String savedValueUrl
  • 保存済みファイルのサムネ用URL
• Object inputValue
  • 新たに選択されたファイル
  • ※（１）ファイルフィールド のvalue値
  • ※ファイルフィールドの仕様により、JSからは再設定不可でリセット（nullの代入）のみ可能
• String inputValueUrl
  • 新たに選択されたファイルのサムネ用URL
• Bool thumbVisible
  • （２）サムネ を表示するかどうか
• String thumbSrc
  • （２）サムネタグにセットする値
  • savedValueUrl or inputValueUrl
• Bool readyToRemove
  • （３）保存済みファイルを削除するかどうか
• Bool removeBtnVisible
  • （４）削除用ボタンを表示するかどうか

状態確認シート

• この行数分リロードと操作を繰り返せば動作確認完了な想定
• ※ null と false のセルは省略。見にくくなったので
• (1).. inputValue
• (2).. thumbSrc 兼 thumbVisible
• (3).. readyToRemove
• (4).. removeBtnVisible

保存済みのファイルがない場合

操作＼	(1)	(2)	(3)	(4)
初期状態
ファイルが選択された	Object	inputValueUrl		true
ファイル選択後に 削除用ボタンが押された
ファイル選択後に 再度ファイル選択が開かれたが キャンセルが押された

保存済みのファイルがある場合

| 操作＼ | (1) | (2) | (3) |(4) |
| --- | --- | --- | --- | --- | --- |
| 初期状態 || savedValueUrl || true |
| 削除用ボタンが押された ||| true | |
| ファイルが選択された | Object | inputValueUrl || true |
| ファイル選択が開かれたが
キャンセルが押された | |savedValueUrl || true |
| 削除用ボタンが押されてから
ファイルが選択された | Object | inputValueUrl | | true |
| ファイル選択されてから
削除用ボタンが押された | | savedValueUrl | | true |
| ファイル選択されてから
削除ボタンが押されて
再度削除ボタンが押された || | true | |
| ファイル選択されてから
削除ボタンが押されて
再度ファイル選択が開かれたが
キャンセルが押された | | savedValueUrl || true |

おわり

あーややこしい