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

Ruby JavaScript  Rails Refile
【ゴール】
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;
}

あとはボタンを好きなデザインに変える事ができます。

参考

https://qiita.com/tanaka-yu3/items/f4a0df867ca9f2476314