Railsでfile_fieldをいい感じに装飾する

株式会社TECH LUCKという会社で代表兼エンジニアをしている齊藤です。

DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら弊社HPからご相談をいただけますと幸いです。
以下のような問題に対応することが可能です。

• プロジェクトでRailsエンジニアが足りなくて困っている
• Railsのバージョンアップをしたいがノウハウ・リソースが足りなくて困っている
• オフショア開発をしているが、要件の齟齬やコード品質が悪いので改善したい

また、Railsエンジニアも募集しておりますので、興味がありましたら弊社HPからご連絡いただけますと幸いです。

前提

毎回 f.file_field の装飾方法を調べているので、記事にして残しておきます。
実装を行うと以下のようなデザインになります。

装飾がなにもない場合の f.file_field のデザイン

装飾後の f.file_field のデザイン

装飾後のデザインになります。
"MVV.png" という文字はファイルを選択した後に、ファイル名がすぐにプレビューされるようにしたものになります。

実装内容

HTMLファイル

erbファイルの内容

app/views/posts/new.html.erb

<%= form_with model: @post do |f| %>
  <%= f.label :image, '画像を選択する', class: 'file_field_design' %>
  <br>
  <%= f.file_field :image, class: 'form-control file_field_content' %>
  <div id="preview"></div>
<% end %>

CSSファイル

CSSファイルの内容

custom.css

input[type="file"] {
  display: none;
}

.file_field_design {
  padding: 5px 20px;
  color: #04B0FB;
  background-color: white;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #04B0FB;
}

JSファイル

JSファイルの内容。
file_fieldでファイルを選んだ際に、ファイル名がプレビューされるようになります。
DOMの操作などのために、jQueryをインストールしておく必要があるのでご注意ください。
違う

app/javascript/application.js

import jquery from "jquery"
window.$ = jquery

$(document).ready(function() {
  function readFileName(input) {
    let files = input.files;

    if (files.length > 0) {
      $('#preview').html('');

      $.each(files, function(index, file){
        $('#preview').append(`<p>${file.name} </p>`);
      })
    }
  }

  let $fileField = $('.file_field_content');

  $($fileField).on('change', $fileField, function(){
    readFileName(this);
  });
});

以上となります。