crop image using ajax in ruby on rails with papercrop in bootstrap modal

Hi i have found solution for upload image using ajax and then crop by using papercrop.
First you need to configured papercrop gem
Then

<p><%=link_to "Change Picture","#","data-toggle"=>"modal" ,
   "data-target"=>"#myModal"%>
</p>

<!-- Modal -->
<div class="modal fade image_modal" id="myModal" tabindex="-1" role="dialog"
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
               Upload and Crop picture
            </h4>
         </div>
         <div class="modal-body">
          <div class="row">
             <div class="col-md-4">
                <div >
                <%=link_to (image_tag current_user.avatar.url(:medium)),"#" ,:class=>"img-thumbnail" %>
                </div>
              </div>
            <div class="col-md-8">
              <%= form_for(current_user, :url => '/upload_image',:id=>"upload_image_form",:class=>"form-inline",:method=>"POST",:multipart=>true,:remote=>true,:authenticity_token => true ) do |f| %>
                <div class="form-group">
                  <label>Change Image</label>
                  <%= f.file_field :avatar %>
                  </div>
                <div class="form-group">
                  <%= f.submit 'Upload',:class=>"btn btn-primary" %>
                </div>
                <% end %>
            </div>
          </div>
           <div class="row">
             <div class="col-md-12">
               <div class="show_crop_image_form">
                 <%= render "users/crop_image_form"%>
               </div>
              </div>
            </div>        
         </div>        
      </div><!-- /.modal-content -->
    </div>
  </div>

view/_crop_image_form.html.erb

  <%= form_for(current_user, :url => '/crop_image',:method=>"GET",:remote=>true) do |f| %>
  <div class="row">
    <div class="col-md-8">
      <%= f.cropbox :avatar,:width => 300,:height => 300 %>
    </div>
    <div class="col-md-4">
      <%= f.crop_preview :avatar,:width => 150 %>
    </div>
  </div>
  <div class="modal-footer">
   <%= f.submit 'Crop',:class=>"btn btn-primary" %>          
 </div>           
<% end %>

view/upload_image.js.erb
$('.show_crop_image_form').html('<%= escape_javascript(render :partial => 'users/crop_image_form') %>');
init_papercrop();

view/crop_image.js.erb
$('#myModal').modal('hide');
$('.show_image').html('<%= escape_javascript(render :partial => 'users/show_image') %>');

controller/users_controller.rb def upload_image
    current_user.avatar = (params[:user][:avatar])
    current_user.save
    respond_to do |format|
        format.js
     end
  end

 def crop_image
  current_user.update(params[:user].permit!)
 end

config/routes.rb
 match 'crop_image' => 'users#crop_image', via: [:get]
  match 'upload_image' => 'users#upload_image', via: [:post]

Note:- init_papercrop(); method you should must put this in js.erb