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

Comments

Popular Posts

How to pass hash in Postman

nginx: unrecognized service

Reading Excel Sheets using "Roo" gem in ruby on rails

Bootstrap Select Picker append add new item if search not exist

Add CORS to Nginx on AWS Elastic Beanstalk

Enable gzip compression on Elastic Beanstalk with nginx

Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

Get video duration by URL in Ruby on Rails

site-enables nginx setting in ruby in rails