In my rails app I’m trying to create a multi upload preview function for my form. I’m using ActiveStorage.
But when I’m trying to upload multiple images it only saves one of the images. Actually it is the last image every time that is saved, all the other images are not.
I’m using devise for sign up, wicked wizard for multi step and cancancan for authorization. I’m also using rails admin.
Appplication controller
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
Registration_steps controller
def user_params
params.require(:user).permit(:professions, :gender, :clinic_logo, :clinic_zip_code, clinic_images: []
)
end
My form
<%= 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>