Carrierwave and Jcrop and Devise, Jcrop is not cropping

Question

I am using Devise for authentication and Carrierwave + Jcrop (gem 'jcrop-rails-v2 ') for users to crop their avatar. I'm following the this railscasts , after completing the railscasts, for some reason, It's not cropping. I'm not sure if it has something to do with Devise or Jcrop

Please see below my codes and screenshots I took. As you can see in the screenshots, After clicking "crop", the image should be the same as the 'preview' but instead it becomes only smaller version of the actuall image. enter image description here

crop.html.erb

<h1>Crop Avatar</h1>

<%= image_tag @user.image_url(:large), id: "cropbox" %>

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

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
  <% %w[x y w h].each do |attribute| %>
    <%= f.hidden_field "crop_#{attribute}" %>
  <% end %>
  <div>
    <%= f.submit "Crop" %>
  </div>
<% end %>

users.js.coffee

jQuery ->
  new ImageCropper()

class ImageCropper
  constructor: ->
    $('#cropbox').Jcrop
      aspectRatio: 1
      setSelect: [0, 0, 600, 600]
      onSelect: @update
      onChange: @update

  update: (coords) =>
    $('#user_crop_x').val(coords.x)
    $('#user_crop_y').val(coords.y)
    $('#user_crop_w').val(coords.w)
    $('#user_crop_h').val(coords.h)
    @updatePreview(coords)

  updatePreview: (coords) =>
          $('#preview').css
                  width: Math.round(100/coords.w * $('#cropbox').width()) + 'px'
                  height: Math.round(100/coords.h * $('#cropbox').height()) + 'px'
                  marginLeft: '-' + Math.round(100/coords.w * coords.x) + 'px'
                  marginTop: '-' + Math.round(100/coords.h * coords.y) + 'px'

registrations_controller.erb

class RegistrationsController < Devise::RegistrationsController

    def update
    account_update_params = devise_parameter_sanitizer.sanitize(:account_update)
    @user = User.find(current_user.id)

        successfully_updated = if account_update_params[:password].blank?
           params[:user].delete(:current_password)
           @user.update_without_password(devise_parameter_sanitizer.sanitize(:account_update))
         else
           @user.update_with_password(devise_parameter_sanitizer.sanitize(:account_update))
         end

         if successfully_updated
            set_flash_message :notice, :updated
            sign_in @user, :bypass => true
            if params[:user][:image].present?
              render "crop"
            else
              redirect_to "/users/3"
            end
         else
            render "edit"
         end
  end


protected



end

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base

  include CarrierWave::RMagick

  storage :file

  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

version :large do
    resize_to_limit(600, 600)
  end

  version :thumb do
    process :crop
    resize_to_fill(100, 100)
  end

  def crop
    if model.crop_x.present?
      resize_to_limit(600, 600)
      manipulate! do |img|
        x = model.crop_x.to_i
        y = model.crop_y.to_i
        w = model.crop_w.to_i
        h = model.crop_h.to_i
        img.crop!(x, y, w, h)
      end
    end
  end


end

can you also attach the uploader also not sure if you know this what params are sanitize on [account_update] (github.com/plataformatec/devise/blob/…) I'm surprize how come your images is getting saved — Viren
ok , please check the updated question. This is my [account_update]devise_parameter_sanitizer.for(:account_update) { |u| u.permit(:username, :image )} — laman
ok cool but where are you permitting crop_x,crop_y,crop_h,crop_w also attach your params as well — Viren
in my user model (user.rb), I wrote attr_accessor :crop_x, :crop_y, :crop_w, :crop_h, it's kind of weird cos I'm using Rails 4. — laman
that right but since you are mass assign since I dont see anywhere you explicitly assign crox_[x|y|h|w] you have to sanitize those from params as well hence I asked you to attach your params in the question — Viren

Cesar Hernandez Cesar Hernandez · Accepted Answer · 2016-03-29T01:15:46

def configure_account_update_params
    devise_parameter_sanitizer.for(:account_update) << [:crop_x, :crop_y, :crop_w..

I did that and it works!

Carrierwave and Jcrop and Devise, Jcrop is not cropping

crop.html.erb

users.js.coffee

registrations_controller.erb

image_uploader.rb

1 Answers