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">
×
</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.erbFirst 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">
×
</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>
<%= 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') %>');
$('.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
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]
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
Post a Comment