Предварительный просмотр нескольких загрузок не сохраняет все изображения - PullRequest
Новая
       28

Предварительный просмотр нескольких загрузок не сохраняет все изображения

0 голосов
/ 04 февраля 2020

В моем приложении rails я пытаюсь создать функцию предварительного просмотра мультизагрузки для моей формы. Я использую ActiveStorage. Но когда я пытаюсь загрузить несколько изображений, он сохраняет только одно из изображений. На самом деле это последнее изображение при каждом сохранении, все остальные изображения - нет.

Я использую devise для регистрации, wicked wizard для многошаговой и cancancan для авторизации. Я также использую rails admin.

Контроллер приложений 

def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:professions, :gender, :clinic_logo, :clinic_zip_code, clinic_images: []])
devise_parameter_sanitizer.permit(:account_update, keys: [:professions, :gender, :clinic_logo, :clinic_zip_code, clinic_images: []]) 
end

Контроллер регистрационных шагов 

def user_params
params.require(:user).permit(:professions, :gender, :clinic_logo, :clinic_zip_code, clinic_images: []
)
end

Моя форма 

<%= form_for @user, url: wizard_path, method: :put do |f| %>

<div class="photos">

<% if @user.clinic_images.attached? %>
  <% @user.clinic_images.each do |image| %>

<div class="image-show">    
<%= image_tag(image.variant(resize: "100x100")) %>
   </div>
  <% end %>

<% end %>

<div class="image-upload"> 
<div class="overlay" id="oldDivImages"><div class="overlay-icon">+</div>
 <%= f.file_field :clinic_images, multiple: true, accept:'image/*', id: "gallery-photo-add" %> 
     </div>
<div class="overlay-text">Tilføj billede</div>

</div>
<div class="gallery"></div>

</div> 
<% end %>

JS

<script>
$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});
</script>
...