Настройте поле загрузки изображения в простой форме и на носителе

Question

Я боролся с настройкой простого поля формы для загрузки изображения (Carrierwave) в моем приложении Rails.

Текущий дизайн:

Желаемый результат

Я проверял HTML, созданный помощниками простых форм:

<%= f.input :photo %>
<%= f.input :photo_cache, as: :hidden %>

добавить стилизацию, удалить ненужные поля и значки, в результате чего:

<label class="btn file-upload-btn">
 <div class="form-group file required event_photo upload-field">
  <div class="fileinput fileinput-new input-group" data-provides="fileinput">
   Add a photo
   <div class="form-control uneditable-input input-name" data-trigger="fileinput">
    <i class="fa fa-file fileinput-exists"></i>
    <span class="fileinput-filename"></span>
   </div>
   <div class="input-group-btn"  style="display: none;">
    <input class="file required file-upload" type="file" name="event[photo]" id="event_photo">
   </div>
  </div>
 </div>
 <span style="display:none;">
  <%= f.input :photo_cache, as: :hidden %>
 </span>
</label>

Кнопка работает правильно - я могу выбрать картинку, имя тега показывает выбранное имя img. Однако при попытке отправить форму выдает ошибку, что изображение не может быть пустым.

Что мне здесь не хватает?

Answer 1

Я предлагаю использовать виджет загрузки изображений, включенный в Jasny gem: http://www.jasny.net/bootstrap/javascript/

И настроить ввод, как с фото пользователя:

 <div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
     <input type="file" name="user[photo]" id="user_photo">
    </span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

Вы можете свободно настраивать CSS так, как я:

Он работает над моим проектом.