Простая форма ведет себя иначе, чем form_for

Question

Simple_form

<%= simple_form_for(@book, wrapper: :horizontal_form, wrapper_mappings: {
  }, html: { class: 'form-horizontal' }) do |f| %>
  <%= f.error_notification %>
  <div class="image-upload">
    <%= f.input :book_cover, as: :file , input_html: { class: 'fa fa-cloud-download'}%>
  </div>
    <%= f.input :category_id, collection: @categories, prompt: 'Select a category' %>
    <%= f.input :author %>
    <%= f.input :description %>

  <div class="d-flex">
    <div class="ml-auto">
      <%= f.button :submit %>
      <%= f.button :cancel, to: books_path %>
    </div>
  </div>
<% end %>

Это моя форма simple_form.Я хочу, чтобы f.input: book_cover отображался в виде значка fa-cloud-download без кнопки обычной загрузки.

CSS.

.image-upload > input {
    display: none;
}

У меня есть другая форма, работающая с ним(это просто фрагмент обычного ресурса form_for:

 <%= f.form_group :avatar, class: "row" do |f| %>
                  <%= f.label :avatar, class: "col-sm-4 col-form-label" %>
                  <div class="col-md-8">
                    <label class="image-upload form-control">
                      <i class="fa fa-cloud-download"></i>
                      <% if @user.avatar.present? %> <%= @user.avatar_file_name %>
                      <% end %>
                      <%= f.file_field :avatar %>
                      <%= f.error_messages %>
                    </label>
                  </div>
                <% end %>

Не получается заставить мою simple_form работать только с иконкой.

Редактировать: Загрузка изображения, чтобы показать, что мойпроблема в том, как это должно выглядеть

картинка должна выглядеть так

Answer 1

SimpleForm имеет метод input_field, который вы можете использовать вместо input для визуализации только фактического элемента ввода без div-оболочки и метки.Это помогает, если вы хотите строить более сложные структуры вручную.

<label class="col-sm-4 col-form-label">Book cover</label>
<div class="col-md-8">
  <label class="image-upload form-control">
    <i class="fa fa-cloud-download"></i>
    <%= f.input_field :book_cover %>
    <%= f.error_messages %>
  </label>
</div>