【Rails】form_with下で画像選択フォームとlabel要素を関連付ける方法

form_with下で、画像選択フォームとlabel要素を関連付ける方法を学習したので、
アウトプットしていきます。

①前置き

通常、画像選択フォームを<input type="file">のような形で実装すると、
「ファイルを選択ー選択されていません」という味気のないデフォルトボタンが表示されます。
これを「画像を選択してね！」のような自分が好きな文言に変えたい時に役立つのが
label要素です。

＜label要素とは？＞
フォームの中で、フォームの項目名とフォームの入力要素（画像選択フォーム、プルダウン、チェックボックスなど）を関連付けるための要素です。

label要素の役割の1つは、label要素がクリックされたときに、子要素もクリックされたことにしてくれることです。この仕組みを使うと、見えないはずのファイル選択ボタンをクリックしたかのように動作させることができます。

②【通常】画像選択フォームとlabel要素の関連付け

app/views/messages/message.html.erb

<label class="form-image">
  <span class="image-file">画像を選んでね</span>
  <input type="file" class="hidden">
</label>

app/assets/stylesheets/messages.css

.hidden {
  display: none;
}

こうすることで画像選択フォームはdisplay: none;、つまり非表示となり
代わりに「画像を選んでね」というspan要素をクリックすると、画像選択画面へと移ることができます。

③【form_with下】画像選択フォームとlabel要素の関連付け

それでは今回の本題となる、form_with下でのlabel要素との関連付けです。

<label class="form-image">
  <span class="image-file">画像を選んでね</span>
  <%= f.file_field :image, id:"item-image", class:"hidden" %>
</label>

例えば「ユーザー新規登録時に、プロフィール画像も合わせて選択させたい」という場合、
画像選択フォームのコードは、<%= f.file_field :image, id:"item-image" %>のようにブロック変数を元にした記述をする必要があります。
そのため②の書き方では選んだ画像とform_withが紐付かず、パラメーターに画像情報を含めることができなくなってしまいます。

したがって<%= f.file_field :image, id:"item-image" %>ごとlabel要素の中に入れ、class:"hidden"を追加し、display: none;を指定することで画像選択フォームとlabel要素を関連付けることができます。


以上で本記事の実装は完了です！お疲れ様でした。
ご指摘などあれば、ご教授頂けると幸いです。