Simple_form and Bootstrap 4 and File Input Type

[Chris Kiklas]

I am playing around with using Rails 4, Bootstrap 4 (Alpha Release 2) and Simple Form and so far everything is going pretty well...there are not too many changes that need to be made to the initializer to get it to work.

But one are I am stuck is with the File input type. No matter what I do, I cannot get the control to show up on Safari, Chrome or Firefox:

That's my example...no file control shows up. Even stranger is that tool tips for the control *do* show up:

And the control is actually there, just not visible. I can click on the above tooltip, add a file, and then hover again and see the file name. When I hit create, the file gets saved to my model:

So it works, just...is invisible.

This is the code for my form:

<%= simple_form_for(@sample) do |f| %>
    <%= f.error_notification %>

<div class="form-group">
    <%= f.input :name %>
    <%= f.input :url, class: "form-control", placeholder: "http://www.example.com", error: "You must include the http part of the web address." %>
  </div><!-- ./form-group -->

  <div class="form-group">  
    <%= f.input :logo %>
  </div><!-- ./form-group -->

  <div class="form-group">
    <%= f.button :submit, "Create", class: "btn btn-primary"  %>
  </div>
<% end %>

And this is from the bootstrap and simple_form initializer:

config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :readonly
b.use :label, class: 'control-label'

b.use :input, class: 'form-control-file'
b.use :error, wrap_with: { tag: 'span', class: 'form-control-error' }
b.use :hint,  wrap_with: { tag: 'small', class: 'text-muted' }
end

And the results of View Source:

<form novalidate="novalidate" class="simple_form new_sample" id="new_sample" enctype="multipart/form-data" action="/sample" accept-charset="UTF-8" method="post">

    <div class="form-group">
        <div class="form-group string required sample_name">
            <label class="string required control-label" for="sample_name">
            <abbr title="required">*</abbr>
                Name
            </label>
            <input class="string required form-control" type="text" name="sample[name]" id="sample_name" />
        </div>

        <div class="form-group url optional sample_url">
            <label class="url optional control-label" for="sample_url">
                Url
            </label>
            <input class="string url optional form-control" placeholder="http://www.example.com" type="url" name="sample[url]" id="sample_url" />
        </div>
    </div><!-- ./form-group -->


    <div class="form-group file optional sample_logo">
        <label class="file optional control-label" for="sample_logo">
            Logo
        </label>
        <input class="file optional form-control-file" type="file" name="sample[logo]" id="sample_logo" />
    </div>


    <div class="form-group">
        <input type="submit" name="commit" value="Create" class="btn btn-primary btn btn-primary" />
    </div>
</form>

And just for grins, my gem file:

gem "bootstrap", "~> 4.0.0.alpha2"
gem "simple_form"
gem "country_select"
source "https://rails-assets.org" do
  gem "rails-assets-tether", ">= 1.1.0"
end
gem "paperclip", "~>3.0"
gem 'aws-sdk', '~> 2'

Did I make a typo I can see here or is there something big I am missing?

Thanks in advance!

-chris.