CarrierWave upload with Aviary and FileReader

aviary_uploader.rb

# encoding: utf-8

class AviaryUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  # storage :file
  storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    # "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
    "heroku/uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end
  def default_url
    ActionController::Base.helpers.asset_path('empty.png')
  end
  
  # Process files as they are uploaded:
  # process :scale => [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process :resize_to_fit => [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_white_list
    %w(jpg jpeg gif png)
  end

  # def cache_dir
  #   # "#{Rails.root}/tmp/uploads"
  #   ENV['app_root'] + "/tmp/uploads"
  # end
  
  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #   "something.jpg" if original_filename
  # end

end

aviary_with_file_reader.html.erb

<style type="text/css" media="screen">
  input[type="file"] { display: inline-block; }
  .label-warning { display:none }
  .label-danger { display:none }
</style>

<%= form_for @designer do |f| %>
  ...
  <div>
    <%= f.label :image %>:           
    <%= f.file_field :image, accept: "image/gif,image/jpeg,image/png" %>
    <%= f.hidden_field :remote_image_url %>
  
    <span class="label label-warning">Note: confirm image change with save button below</span>

    <% if @designer.image? %>
      <%= image_tag(@designer.image_url, id: 'image', data: { title: 'Designer Profile Image', ratio: '4:3', size: '155' }) %>
      <small>Preview @ 400 x 300px</small> &nbsp;&nbsp; 
      <button class="btn" onclick="return editImage('image');">Edit image</button> &nbsp;&nbsp; 
      <label><%= f.check_box :remove_image %> Remove uploaded image</label>
    <% end %>
  </div>
  ...
  <span class="label label-danger" style="display:none">At least one image has been changed, confirm changes with button below:</span>
  <%= f.submit %>
<% end %>


<% content_for :javascript do %>
<script type="text/javascript" charset="utf-8">
$(function() {
  $('input[type=file]').each(function() {
    $(this).change(function() {
      if(this.files!=undefined) { 
        loadImage(this.files[0], $(this).siblings('img:first')); 
      }
      else { 
        alert('Your Browser does not support HTML5 uploads! Please install newer browser like Chrome'); 
      }
    });
  });
  
  $("form").submit(function() {
      $(this).find('input[type=file]').remove();
      return true; // ensure form still submits
  });
});


function loadImage(file, image) { 
  var reader;
  try {
    reader = new FileReader();
    var max_file_size = 1048576 * 4;
    if (file.size > max_file_size) {
      alert('File size is too big, limit under 4MB');
      return;
    }
  } catch (err) {
    // alert('Your Browser does not support HTML5 uploads! Please install newer browser like Chrome'); 
    alert('No file chosen (or your Browser does not support HTML5 uploads)'); 
    return;
  }
  
  reader.onload = function(e){
    // e.target.result holds the DataURL which can be used as a source of the image:
    // image.attr('src',e.target.result);
    // image.attr('width','220');
    // image.attr('height','192');
    
    launchEditor(image.attr('id'), e.target.result); 
  }
         
  // Reading the file as a DataURL. When finished, this will trigger the onload function above:
  reader.readAsDataURL(file);
}

function editImage(id) {
  launchEditor(id, $('#' + id).attr('src'));  
  return false
}
</script>

<!-- Load Feather code -->
<!-- <script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script> -->
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script>

<!-- Instantiate Feather -->
<script type='text/javascript'>
   var featherEditor = new Aviary.Feather({
       apiKey: '277df47b18f5dabf',
       // apiKey: '<%= ENV['AVIARY_KEY'] %>',
       apiVersion: 3,
       // enableCORS: true,
       theme: 'minimum', // Check out our new 'light' and 'dark' themes!
       tools: 'all',
       appendTo: '',
       onSave: function(imageID, newURL) {
           // var img = document.getElementById(imageID);
           // img.src = newURL;
           img = $('#' + imageID);
           img.attr('src', newURL);
           img.siblings('input[id$=_url]').val(newURL);
           img.siblings('span.label-warning').show();
           $('.label-danger').show();
           featherEditor.close();
           // alert('edited image temp url: ' + newURL);
       },
       onError: function(errorObj) {
           alert(errorObj.message);
       }
   });
   function launchEditor(id, src) {
     var title = $('#' + id).data('title');
     var ratio = $('#' + id).data('ratio');
     // var size = $('#' + id).data('size');
       featherEditor.launch({
           image: id,
           url: src,
           hiresUrl: src,
           fileFormat: 'png',
           // maxSize: size,
           maxSize: 800,
           // cropPresets: ['131:155'],
           // initTool: 'crop',
           forceCropPreset: [title, ratio],
           forceCropMessage: 'Please crop your photo to this aspect ratio'
       });
      return false;
   }
</script>
<% end %>