【f.attachment_filed】 gem refile 使用時 画像送信ボタン CSS 変更

#【ゴール】
gemfile 'refile' 使用時の画像送信ボタンのレイアウトを変更

#【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

#【実装】
アプリケーション内のGemfile内に以下を記述

アプリケーション内.Gemfile

＃refileをインストール
gem "refile", require: "refile/rails", github: 'manfe/refile'
gem "refile-mini_magick"

＃jqueryをインストール
gem 'bootstrap-sass', '~> 3.3.6'
gem 'jquery-rails'

gemfileを対象アプリへ認識させます

Mac内.terminal

$ bundle install

お好きなviewページで以下を入力(これが画像を送信するボタン)

(お好きな.view)

<div class="item_image_btn">
 <%= f.attachment_field :image %>
</div>

ーーここからjQueryを使用しますーー

先ほどのコードを変更

(お好きな.view.html)

<div class="image_wrapper">
  <div class="item_image_btn">
    <%= f.attachment_field :image id: "file" %>
  </div>
  <div id="img_field" onClick="$('#file').click()" >
    <p>画像選択</p>
  </div>
</div>

上記コード解説

画像送信ボタンにidを付与

<%= f.attachment_field :image , id: "file" %>

上記の送信と下のコードを"id"で紐付け、jQueryもviewファイルにて記述

<div id="img_field" onClick="$('#file').click()" >

image_filedをcssで変更

viewに対応している.css

.item_image_btn{
	display: none;
}#元の送信ボタンを隠す

#img_field {
  font-size: 25px;
  font-style: inherit;
  margin: 0 auto;
  color: white;
  background-color: #5bc0de;
  border-radius: 5px;
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

以上