やりたいこと
標準のfile_field
がダサいのでどうにかしてデザインを変えたい。
今回はユーザの画像登録を想定しているため、設定済み画像をクリックしたらそのままファイル選択に移るという流れを実装したい。
実装
これを任意のform
ループの中に入れる。
<%= image_tag user.image, onClick:"$('#upfile').click()" %>
<%= form.file_field :image, style:"display:none;", id:"upfile"%>
onClick
を指定することで対応するidの動作をその部分のクリックで行うことができる。
file_field
ではdisplay:none
を指定して表示をしないようにしている。
あとがき
色々調べていたらこの形に辿り着いたのですが、file_field
のデザインはなかなかややこしいですね...