Uploading the profile pic using modal - ruby-on-rails

Question

I have created the rails app that has a gallery. Now i am willing to have gallery cover photo. I want to update the cover photo using modal. to upload the photo i am using paperclip.
This is my model:
class Gallery < ActiveRecord::Base
has_attached_file :cover_url, :styles => { :small => "108x76" }
validates_attachment_content_type :cover_url, :content_type => ['image/jpeg', 'image/jpg', 'image/png']
end
This is my controller:
def update
puts params
respond_to do |format|
if #gallery.update(gallery_params)
format.html { redirect_to galleries_galleryhome_path(id: params[:id]), notice: 'Gallery was successfully updated.' }
format.json { render :show, status: :ok, location: #gallery }
else
format.html { render :edit }
format.json { render json: #gallery.errors, status: :unprocessable_entity }
end
end
end
def gallery_params
params.require(:gallery).permit(:name, :shoot_date, :release_date, :expiration_date, :archive,:gallery_layout_id, :contact_id,:status, :cover_url).merge(brand_id: current_brand.id,user_id: current_user.id)
end
This is my View:
<div class="cover-photo default pull-left">
<% if #find_gallery.cover_url.present?%>
<%=image_tag #find_gallery.cover_url.url(:small)%>
<%end%>
</div>
<div class="icon-cta" data-toggle="modal" data-target="cover_modal">
<% if #find_gallery.cover_url.present? %>
<%=link_to "Add<br>Cover".html_safe, "#profile-change" ,'data-toggle': "modal", class: "change-cover"%>
<% else %>
<%=link_to "Add<br>Cover".html_safe, "#album-title-popup" ,'data-toggle': "modal", class: "change-cover"%>
<% end %>
</div>
<!-- Album Cover Modal -->
<div class="modal fade" id="profile-change" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Album Cover</h4>
</div>
<%= form_for #gallery_cover,html: {multipart: true}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
<%= label_tag "photo"%>
<div class="modal-body">
<%= f.hidden_field :cover_url,id: "hidden_cover_url"%>
<div class="empty stack">
<%= image_tag #find_gallery.cover_url.url,size: "355x237",id: "changecover"%>
</div>
</div>
<div class="modal-footer pull-left">
<button data-toggle="modal" data-target="#album-title-popup" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-trash set-stack"></span>Remove</button>
<button data-toggle="modal" data-target="#album-add-cover" data-dismiss="modal" type="button" class="btn btn-default"><span class="fa fa-picture-o set-stack"></span>Change</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= f.submit "Save"%>
</div>
<%end%>
</div>
</div>
</div>
<!-- Add Album Photo Modal -->
<div class="modal fade" id="album-add-cover" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add Cover</h4>
</div>
<div class="modal-body">
<%= form_for #gallery_cover,html: {id: "Cover-Upload"}, url: {controller: "galleries", action: "update", id: params[:id]}, method: :patch do |f| %>
<ul class="source-links">
<li class="js-cover-flow-upload">
<span class="btn btn-file">
<p>Upload From Computer</p>
<%=f.file_field :cover_url, id: "Computer-Upload", onchange: "document.getElementById('hidden_cover_url').val = window.URL.createObjectURL(this.files[0])" %>
<%= f.hidden_field :id, value: params[:id]%>
</span>
<span class="fa fa-caret-right pull-right"></span>
</li>
<li class="js-cover-flow-random">
<span class="btn btn-file">
<p>Choose From Gallery</p>
</span>
<span class="fa fa-caret-right pull-right"></span>
</li>
</ul>
<%= image_tag "image",id: "sample"%>
<%= f.submit "Save", style: "display:none;",id: "Pc"%>
<% end %>
</div>
</div>
As you can see above there are two modals. On clicking of Add Cover Link #profile-change modal will open. This modal is having the button Change. On clicking this button it will open second modal i.e. #album-add-cover modal. On the second modal i can select the image to upload. As soon as i select the photo i should be redirected to first modal with the value selected on second modal so that i can update the cover photo of gallery on submitting the form on first modal.
This is the script that i have wrote:
function updatecover(input){
if (input.files) {
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function (e) {
$("#changecover").attr('src', e.target.result);
}
}
}
$("#Computer-Upload").change(function(){
updatecover(this);
alert($(this).val());
$("#changecover").attr("src",$(this).val());
// $("#Pc").click();
});
The above script is displaying the selected file on the first modal but on saving the photo it gives me error of:
Paperclip::AdapterRegistry::NoHandlerError in GalleriesController#update
It is updating the profile pic without loading the first modal.
Please any one can help me? Thank you in advance.