Cropped image not saving - ruby on rails

I am working on ruby 2.3.1 and rails 3.2.13 in a crop feature. I am using a cropper.js JavaScript library for cropping the image and adding the cropped image to the input field for saving in server. Cropping is working fine but the cropped image not getting saved.

brand.rb

class Brand < ActiveRecord::Base
  belongs_to :company, :inverse_of => :brands
  mount_uploader :image, AwsBrandImageUploader
end

crop_popup.haml

:javascript
  jQuery(function($) {
    $('#cropperImage').cropper({
      aspectRatio: 16 / 9,
      crop: function(dataNew) {
        // Output the result data for cropping image.        
      }
    });    
  });

  function cropBrandImage() {
    var croppedImage = $('#cropperImage').cropper('getCroppedCanvas').toDataURL('image/jpeg');

    $('#image').attr('src', croppedImage);
    $('[name="brand[image]"]').val(croppedImage); //add the cropped image to the input field using field name
  }

_form.haml before crop feature:

  .span6{:style=>"margin-left:60px"}
    = f.label :image, label: '<span title="For best results upload an image with an aspect ration of 3 (wide) by 2 (high)."><i class="fa fa-info-circle fa-lg" aria-hidden="true"></i> Brand image</span>'
    %div{style: 'width:201px;height:134px;border:3px solid #EEEEEE;background:#EEEEEE;', class: 'image_preview text-center'}
      - if @brand.image?
        = image_tag @brand.image_url(:mobile400), style: 'max-width:201px;max-height:134px;', id: 'image'
      - else
        %img(src='/assets/default_produce_image.jpg'){style: 'max-width:201px;max-height:134px;', id: 'image'}
      = hidden_field(:image, :field, :value => @brand.image)
    %div{:style => 'margin-top:15px;'}
      = f.file_field :image, :class => 'filestyle', :onchange => 'imagePreview(this, "image", false)'
    %span{:id => 'error_image'}

_form.haml after crop feature implemented:

  .span6{:style=>"margin-left:60px"}
    = f.label :image, label: '<span title="For best results upload an image with an aspect ration of 3 (wide) by 2 (high)."><i class="fa fa-info-circle fa-lg" aria-hidden="true"></i> Brand image</span>'
    %div{style: 'width:201px;height:134px;border:3px solid #EEEEEE;background:#EEEEEE;', class: 'image_preview text-center'}
      - if @brand.image?
        = image_tag @brand.image_url(:mobile400), style: 'max-width:201px;max-height:134px;', id: 'image'
      - else
        %img(src='/assets/default_produce_image.jpg'){style: 'max-width:201px;max-height:134px;', id: 'image'}
      = f.hidden_field(:image, :value => @brand.image)
    %span{:id => 'error_image'}

I am using CarrierWave::MiniMagick for uploading and saving the image file.I am doing the form post for saving the data. When i upload the image using file field and clicking save is saving the image in server. But when i crop the same image through the crop_popup and then click save is not saving the image.

I am cropping the image in a popup and adding the cropped image to the input field using field name. Also i have added the .haml file change before and after crop implementation.

Please help me in saving the image in server.

Thanks