Rails
HTML5
初心者
RubyOnRails
新人

railsのfile_fieldで画像クリックによりアップロード

やりたいこと

標準の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のデザインはなかなかややこしいですね...