Bootstrapのfile inputをキレイに整える（Rails4,form-horizontal）

他にも記事はたくさんあるがRails4でgemを使わない方法が見つからなかったので備忘録のために投稿。

• 実際にfileをアップロードするためのフィールドは隠す
• 隠したフィールドを使うためにbtn（又はlabel）にclassを指定し擬似的にクリックさせる
• 実際にアップロードされたファイルパスを擬似的なtextフィールドに表示させる

まずはview側。

# app/views/files/new.html.erb
<div id="set_file">
  <%= form_tag import_file_path, class: "form-horizontal", multipart: true do %>

    <%= file_field_tag :file, id: "hide_input_file", class: "hide" %> #=> 実際にfileをアップロードするfieldは隠す

    <div class="form-group">
      <%= label_tag :file, "CSVファイル", class: "control-label col-sm-2 file_upload" %> #=>classにfile_uploadを指定
      <span class="col-sm-10">
      <span class="input-group">
        <input id="show_input_file" class="form-control" disabled> #=>表示用にidにshow_input_fileを指定
        <span class="input-group-btn">
          <button class="btn btn-default file_upload" type="button"> #=>classにfile_uploadを指定
          <i class="glyphicon glyphicon-folder-open"></i>
        </span>
      </span>
      </span>
    </div>
    <div class="form-group">
      <span class="col-sm-offset-2 col-sm-10">
        <%= submit_tag "アップロード", class: "btn btn-primary" %>
      </span>
    </div>
  <% end %>
</div>

次にjs側。

// app/assets/javascripts/files.js.coffee
$ ->    
  $('#set_file')
    .on "click", ".file_upload", (e) ->
      $('#hide_input_file').click()
// .file_uploadをクリックしたら#hide_input_fileをクリックする
      
    .on "change", "#hide_input_file", (e) ->
      $('#show_input_file').val($('#hide_input_file').val())
// #hide_input_fileの値が変わったら#show_input_fileにその値を適用する