[rails]form_forのfile_field使用時のアイコンをAwesomeアイコンに変える

5678 ワード
file_field form_for アイコン Ruby Rails Ruby テキストリンク

form_forでfile_field使用時のアイコンの変え方

Railsの勉強を初めて３週間ですが、少しずつアウトプットをしていきたいと思います。

今回はform_forでfile_fieldを使用した時にでてくる、以下のボタンとメッセージをAwesomeアイコンに変更する方法について記載します。
[出てくるボタンとメッセージ]
- 「ファイルを選択」ボタン
- 「選択されていません」メッセージ

　※Awesomeについては、調べたらすぐに出ると思います。

結果

[form_for]の記述

= form_for(@hoge) do |f|
  = f.text_area :text
  %label.label
    = fa_icon'image'
    = f.file_field :upload_file, class: "hoge"
  = f.submit "send"

[css]の記述

.label{
  cursor: pointer;
  font-size:1.5em;
 }
.hoge{
  display: none;
}

手順

初期状態

 = form_for(@hoge) do |f|
  = f.text_area :text
  = f.file_field :upload_file, class: "hoge"
   # file_fieldを指定すると、ファイルを選択ボタンとメッセージがでてきます。
  = f.submit "send"

[追記1]

file_fieldのクラスにdisplay:noneを記述する。

.hoge{
  display: none;
}

出力結果：display:noneと記述すると、ボタンとメッセージが一旦表示されなくなります。

[追記2]

form_forにコードを追記し、Awesomeアイコンを追加する。

 = form_for(@hoge) do |f|
   = f.text_area :text
   = fa_icon'image' # ←を追加。
   = f.file_field :upload_file, class: "hoge"
   = f.submit "send"

出力結果：Awesomeアイコンが表示されます。（ボタンとメッセージは消えたまま。）
　　　　 アイコンは出ますが、クリックも何もできない状態です。
　　　　

[追記3]

form_forにlabelを追記する。
[form_for]

 = form_for(@hoge) do |f|
   = f.text_area :text
   %label.label # ←を追加
     = fa_icon'image'
     = f.file_field :upload_file, class: "hoge"
   = f.submit "send"

出力結果：見た目は変わりませんが、アイコンをクリックするとファイルが選択できるようになります。

[追記4]（完了）

labelにcssを追記し、アイコンを装飾する。

.label{
  cursor: pointer;
  font-size:1.5em;
}

出力結果：アイコンにカーソルを当てるとポインタになり、またアイコンのサイズが大きくなります。クリックするとファイルが選択できるようになります。

以上です！！