フォームのエラーが発生したあとのファイル入力の保護

プリミティブ値とファイル入力の両方を含むフォームでサーバー側のエラー処理とバリデーションを使用している場合、フォームにエラーメッセージが返されるとファイル入力の値が失われます。その結果、ユーザーはファイルを再アップロードする必要があり、使い勝手が低下します。

簡単なケースでファイル入力値を失う問題を克服するために、以下のアプローチを採用できます。

変更前

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <input type="file" name="binaryFile">
    <button type="submit">Submit</button>
</form>

変更後

<input form="binaryForm" type="file" name="binaryFile">

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <button type="submit">Submit</button>
</form>

  1. フォームの再構成: バイナリファイル入力を HTML 構造内のメインのフォーム要素の外に移動します。

  2. フォーム属性の使用: form 属性を追加し、その値をメインのフォームの ID に設定して、バイナリファイル入力を強化します。このリンクにより、バイナリファイル入力がフォーム要素の外に存在する場合でも、フォームに関連付けられます。