Uploading the profile pic using modal

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">&times;</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">&times;</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.