Photo picker with live preview

new.html.haml

%div.tac
  -# remotipart for ajax image upload
  = form_for Parent.new, url: upload_parent_photo_path, remote: true, html: { id: 'file-form' } do |f|
    #temp-photo.tac{ style: "position: relative; background: url('#{image_path(resource.avatar.url(:thumb))}') center center no-repeat; height: 120px" }
      -# prompt
      = link_to '#', class: 'btn btn-mini btn-light', style: 'opacity: 0.9; position: absolute; bottom: 0; left: 50%; width: 100px; margin-left: -55px' do
        Choose Photo
      -# almost transparent file field which actually receives mouse click and "covers" link above
      = f.file_field :avatar, id: 'temp-avatar', style: 'position: absolute; cursor: pointer; opacity: 0.01; top: 0; left: 0; width: 100%; height: 100%; '

  -# reset avatar to default
  = link_to_function 'Remove photo', "$('#temp-photo').css('backgroundImage', \"url('#{image_path(resource.avatar.url(:thumb))}')\"); $('#parent_avatar_cache').val()",
    id: 'remove-photo-link', class: 'hide btn btn-light btn-mini'

= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name)) do |f|
  -# this field will be used to submit chosen image (carrierwave's _cache)
  = f.hidden_field :avatar_cache
  -# some additional fields: name, email, etc
  .form-actions.tar
    = f.submit "Register", class: 'btn btn-active'

:javascript
  $(function() {
    $('#temp-avatar').on('change', function() {
      $('#file-form').submit()
    })
  })