rails jcrop + paperclip

Question

hi all

I have successfully implemented jcrop and paperclip to crop images by going to another page ie the crop.html.erb

but i want to be able to do all cropping on my current page where i upload the image(s) in a popup div / dialog.

so somehow i need to load this the crop.html.erb page into a popup div on click. Here is the code on the crop page

    <% content_for :javascript do %>
    <%= stylesheet_link_tag "jquery.Jcrop" %>
    <%= javascript_include_tag "jquery.Jcrop.min" %>

<% end %>

<script type="text/javascript" charset="utf-8">

$(function() {
  $('#cropbox').Jcrop({
    onChange: update_crop,
    onSelect: update_crop
  });
});


function update_crop(coords) {
  var rx = 100/coords.w;
  var ry = 100/coords.h;
  $('#preview').css({
    width: Math.round(rx * <%= @photo.photo_geometry(:biggest).width %>) + 'px',
    height: Math.round(ry * <%= @photo.photo_geometry(:biggest).height %>) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
  });
  var ratio = <%= @photo.photo_geometry(:original).width %> / <%= @photo.photo_geometry(:biggest).width %>;
  $("#crop_x").val(Math.round(coords.x * ratio));
  $("#crop_y").val(Math.round(coords.y * ratio));
  $("#crop_w").val(Math.round(coords.w * ratio));
  $("#crop_h").val(Math.round(coords.h * ratio));
}

</script>


 <%= image_tag @photo.photo.url(:biggest), :id => "cropbox" %>

 <h4>Preview:</h4>
    <div style="width:100px; height:100px; overflow:hidden">
      <%= image_tag @photo.photo.url(:biggest), :id => "preview" %>
    </div>


 <% form_for @photo do |f| %>
  <% for attribute in [:crop_x, :crop_y, :crop_w, :crop_h] %>
    <%= f.hidden_field attribute, :id => attribute %>
  <% end %>
  <p><%= f.submit "Crop" %></p>
<% end %>

can i just append it to a div or something like that ? or am i way off ?

by the way i am not simply uploading one image at a time so i cant have it goto a crop page then come back. I upload all files at once using uploadify in a popup div on the page and tehn want to be able to click crop link next to an image.

thanks alot rick

Answer 1

You need to make changes similar to this:

in photos_controller.rb

def create
  @photo = Photo.new(params[:photo])
  if @photo.save
    flash[:notice] = "Successfully created photo."
    redirect_to @photo
  end
end

def update
  @photo = Photo.find(params[:id])
  if @photo.update_attributes(params[:photo])
      flash[:notice] = "Successfully updated photo."
      redirect_to @photo
  end
end

def crop
  @photo = Photo.find(params[:id])
end

in routes.rb

map.resources :photos, :member => {:crop => :get}

in photos/show.html.erb

<%= link_to "Crop", crop_photo_path(@photo) %>