'Assigning value to input field on nested:fieldAdded
I have an upload file field. On change of this field, I am triggering add nested field and on 'nested:fieldAdded' I am trying to assign the value to the input file field given in the new generated nested form by using the following jquery:
$(document).off('change').on('change', '#add_gallery_image, #add_place_image',function () {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
var file = $(this)[0].files[0];
file_selector_id = $(this)[0].id;
var reader = new FileReader();
var association = ''
if (file_selector_id.includes("add_gallery_image")) {
association = 'tribute_galleries'
limit_count = GALLERY_LIMIT_JS
} else {
association = 'tribute_places'
limit_count = PLACES_LIMIT_JS
}
reader.onload = function (e) {
file_src = e.target.result;
$(".add_nested_fields[data-association='" + association + "']").click();
}
reader.readAsDataURL($(this)[0].files[0]);
// reader.readAsDataURL($(this)[0].files[0]);
}
})
$(document).on('nested:fieldAdded', function(event){
if(file_selector_id!="") {
var field = event.field;
var dateField = field.find('.add_image');
dateField[0].files = $('#' + file_selector_id)[0].files;
}
})
<div class="upload-btn position-relative">
<%= file_field_tag :image, :name => "tribute_gallery[image]", :class => "add_gallery_image image_uploader1", :id => "add_gallery_image","data-target": "#tribute_tribute_galleries_attributes_0_image-error", accept: 'image/png,image/jpeg,image/jpg', "data-id": gallery_count.present? ? gallery_count + 1 : 1, disabled: gallery_count.present? && gallery_count >= GALLERY_LIMIT %>
<a href="javascript:void(0);" class="text-transform-none f-semi theme-btn w-100 text-center theme-large-btn">
<span class="fa fa-upload mr-2 "></span> <%= I18n.t(:'tribute_setup.placeholders.upload_more') %>
</a>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="box-sec">
<% positionCount = 0 %>
<div class="row tribute_galleries_list" >
<%= f.fields_for :tribute_galleries, wrapper: false, html: { autocomplete: "off"} do |gallery_form| %>
<% if (gallery_form.present? && gallery_form.object.id.present? && gallery_form.object.image.present?) || (gallery_form.present? && !gallery_form.object.id.present? && !gallery_form.object.image.present?) %>
<% positionCount = positionCount + 1 %>
<%#= gallery_form.object.id.present? ? 'first_gallery_div' : '' %>
<div class="col-md-3 col-sm-6 fields first_gallery_div" data-count="<%= gallery_form.object.position.present? ? gallery_form.object.position : (positionCount.present? ? positionCount : '') %>" data-id="<%= gallery_form.object.id.present? ? gallery_form.object.id : '' %>" >
<%= gallery_form.hidden_field :position, :value => gallery_form.object.position.present? ? gallery_form.object.position : (positionCount.present? ? positionCount : ''), :class => 'gallery_position' %>
<div class="photo-img-sec position-relative ">
<div class="photo-img mb-2">
<%= gallery_form.file_field :image, :class => "add_image" ,:style=>"display:none" %>
<img src="<%= gallery_form.object.image.present? ? gallery_form.object.image : "/assets/gallery-dummy.png" %>" width="247" height="162" alt="personlized memorial page online" class="view_image_tag">
<% if gallery_form.object.user_id.present? && gallery_form.object.user_id != current_user.id %>
<% if gallery_form.object.user.present? && gallery_form.object.user.user_detail.present? %>
<div class="photo-added">
<p class="small"><%= I18n.t(:'tribute_setup.placeholders.added_by') %>
<%= gallery_form.object.user.user_detail.first_name.present? ? gallery_form.object.user.user_detail.first_name : '' %> <%= gallery_form.object.user.user_detail.last_name.present? ? gallery_form.object.user.user_detail.last_name : '' %>
</p>
</div>
<% end %>
<% end %>
</div>
<div class="form-group">
<%= gallery_form.text_field :map_link, :placeholder => I18n.t(:'tribute_setup.placeholders.google_link'), :class => "theme-input form-control map_link_class" %>
</div>
<div class="form-group">
<%= gallery_form.text_field :title, :placeholder => I18n.t(:'tribute_setup.placeholders.title')+I18n.t(:'tribute_setup.placeholders.optional'), :class => "theme-input form-control name_class title_class" %>
</div>
<div class="form-group">
<%= gallery_form.text_field :description, :placeholder => I18n.t(:'tribute_setup.placeholders.description')+I18n.t(:'tribute_setup.placeholders.optional'), :class => "theme-input form-control description_class" %>
</div>
<%= gallery_form.link_to_remove "<i class='fa fa-times' aria-hidden='true'></i>".html_safe, class:"remove-btn remove_gallery_image" %>
</div>
</div>
<%= gallery_form.hidden_field :user_id, :value => gallery_form.object.user_id.present? ? gallery_form.object.user_id : current_user.id %>
<% end %>
<% end %>
</div>
<p class='add_gallery_count' data-id="<%= gallery_count %>"><%= f.link_to_add "Add", :tribute_galleries, :data => {:target => ".tribute_galleries_list"}, :style => "display:none", :class=>"add_gallery_link" %></p>
</div>
</div>
</div>
Also, the above code is working fine for chrome but in firefox, it is assigning the last uploaded file value to all the newly generated nested forms along with the current generated nested form.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
