Bootstrap の file field おめかし

デザイン無能なのでBootstrap便利に使わせて貰ってます。
社内シスしか作らないからオワコンとか関係無い。

form作ってて、file field だけが違和感。


デザイン無能でも、これはいけてないのはわかる。
ググると、bootstrap-fileinput がまずひっかかった。
Bootstrap File Input - © Kartik
何か色々できすぎるみたい。ちょっと見た目変えたい程度なのに、オーバースペックかな、と。

で、選んだのはこれ。
Bootstrap Filestyle 1.2.1 - jQuery Customization of input html file for Bootstrap Twitter
ダウンロードして、lib/assets/javascripts に js ファイルを入れ、application.js に require 追加。

フォームサンプル

= form_for @user, html: { class: "form-horizontal" } do |f|
  .form-group
    = f.label :name, class: 'col-sm-3 control-label'
    .col-sm-5
      = f.text_field :name, class: 'form-control'
  .form-group
    = f.label :email, class: 'col-sm-3 control-label'
    .col-sm-5
      = f.text_field :email, class: 'form-control'
  .form-group
    = f.label :avatar, class: 'col-sm-3 control-label'
    .col-sm-8
      = f.file_field :avatar, class: 'filestyle', "data-buttonText": "ファイル選択"

  .form-group
    .col-sm-offset-3.col-sm-3
      = f.submit class: 'btn btn-primary'

class に filestyle を指定して、表示文字列を変えたければ data-buttonText で。
簡単ね。

関係無いけど、Ruby で "文字列": 値 ってかけるの知らなかった。key は Symbol になる。

% pry
[1] pry(main)> h = { "hoge": :a }
=> {:hoge=>:a}
[2] pry(main)> h[:hoge]
=> :a
[3] pry(main)> h["hoge"]
=> nil