Rails: вложенные поля файла, показывают имя файла, выбранного в каждом поле - PullRequest
Новая
       16

Rails: вложенные поля файла, показывают имя файла, выбранного в каждом поле

2 голосов
/ 13 марта 2019

Я использую cocoon gem для добавления изображений с вложенными полями: 

<div id="attachments">
    <%= f.simple_fields_for :attachments do |attachment| %>
    <%= render 'products/attachment_fields', form: attachment  %>
    <% end %>
        <div class="links" id="add_attachment" style="display: inline; float: right;">
           <%= link_to_add_association 'add more images', f, :attachments, form_name: 'form' %>
         </div>
</div>

И это частичное .... _attachment_fileds.tml.erb: 

<div class="nested-fields">
  <%= form.label :image, required: true %>
    <div class="input-group">
      <div class="custom-file" style="padding-top: 38px;">
        <%= form.input :images, label: false, as: :file, :input_html => { :class => 'custom-file-input', :style=>"cursor: pointer", :id=>"inputGroupFile01"} %>
        <label class="custom-file-label" for="inputGroupFile01" id="file-name" style="cursor: pointer;">Choose file</label>
      </div>
    </div>
       <div style="text-align: right;"><%= link_to_remove_association "remove", form %></div>
</div>

Все работает нормально.

Теперь, относительно каждого поля, которое генерируется с cocoon Я хотел бы заменить текст choose a file из поля метки на имя файла, который был выбран,

Сначала я попробовал следующее, но потом понял, что cocoon gem генерирует разные идентификаторы для каждого поля.

<script>
  $("#inputGroupFile01").change(function(){
      $("#file-name").text(this.files[0].name);
  });
</script>

Так что теперь я застрял на том, как реализовать вышеизложенное.Любая помощь будет принята с благодарностью.

1 Ответ

1 голос
/ 14 марта 2019

HTML-идентификатор должен быть уникальным на странице, поэтому вы не можете использовать уникальный идентификатор для повторяющегося поля. Хотя страница может отображаться правильно, при публикации формы она будет игнорировать дублирующиеся идентификаторы (и, таким образом, будет публиковать неверную / неполную информацию).

Во-вторых, используя jquery, довольно просто найти ближайший элемент.

Так что в вашем пароле для вложенных полей удалите все идентификаторы, поэтому напишите что-то вроде 

<%= form.input :images, label: false, as: :file, 
      :input_html => { :class => 'custom-file-input', :style=>"cursor: pointer"} %>
<label class="custom-file-label" style="cursor: pointer;">Choose file</label>

И тогда вы можете написать что-то вроде (очевидно, не проверено) 

$(".nested-fields .custom-file-input").change(function(){
  $(this).siblings("label.custom-file-label").text(this.files[0].name);
});

Есть несколько вариантов, и я не уверен, какой селектор работает лучше всего. Вы можете подняться, а затем выбрать правильный ярлык: 

 $(this).closest('.nested-fields').find('label.custom-file-label')

Я не уверен, сработает ли просто поиск ярлыка closest? 

 $(this).closest('label.custom-file-label')

Или, как я делал выше, найдите sibling с правильным селектором.

...