Uploading user avatars to S3

_pic.html.haml

%section.settings-picture
  %h2 Profile Picture
  .picture-holder= get_avatar user
  .picture-upload
    %h3 Upload a new picture
    = f.file_field :avatar
    .button Choose a file to upload
  .clearfix
  .tip To avoid cropping, we recommend making your image 100x100 pixels. We only accept JPG, GIF, and PNG files.

application_helper.rb

module ApplicationHelper

  def get_avatar(user)
    image_tag user.avatar_url, :alt => user.name
  end
end

fancy_file_input.js.coffee

SITE = SITE or {}
SITE.fileInputs = ->
  $this = $(this)
  $val = $this.val()
  valArray = $val.split("\\")
  newVal = valArray[valArray.length - 1]
  $button = $this.siblings(".button")
  $fakeFile = $this.siblings(".file-holder")
  if newVal isnt ""
    $button.text "Photo Chosen"
    if $fakeFile.length is 0
      $button.after "<div class=\"file-holder\">" + newVal + "</div>"
    else
      $fakeFile.text newVal

$(document).ready ->
  $("input[type=file]").bind "change focus click", SITE.fileInputs  
  $("input[type=file]").hover (->
    $(this).next("div.button").addClass "hover"
  ), ->
    $(this).next("div.button").removeClass "hover"

user.rb

class User < ActiveRecord::Base
  attr_accessible :name, :username, :email, :avatar,
                  :password, :password_confirmation
  has_secure_password
  has_attached_file :avatar, :styles => { :thumb => "100x100#" },
                    :storage         => :s3,
                    :s3_credentials  => "#{Rails.root}/config/s3.yml",
                    :path            => "user/:id/:style/:filename"

  def avatar_url
    if self.avatar.file?
      self.avatar.url(:thumb)
    else
      "default_avatar.png"
    end
  end
end

users.css.scss

/* File Input Field => Pretty Blue Button */
.picture-upload {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  z-index: 100;
}
.settings-picture .picture-upload { left: 130px; }
.picture-upload input {
  cursor: pointer;
  font-size: 100px;
  height: 100%;
  filter: alpha(opacity=0);
  -moz-opacity: 0.001;
  opacity: 0.001;
  position: absolute;
  right: 0;
  top: 0;
}
.picture-upload .button {
  font: 700 14px/40px ff-meta-serif-web-pro,serif;
  padding: 0 20px !important;
  text-align: center;
  height: 38px;
  display: inline-block;
  color: #fff !important;
  border: 1px solid #1d79a0;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  background: #2088b4;
  background: -moz-linear-gradient(100% 100% 90deg, #2088b4, #39b0e2);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#39b0e2), to(#2088b4));
  background: -webkit-linear-gradient(#39b0e2, #2088b4);
  background: -o-linear-gradient(#39b0e2, #2088b4);
  text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  -moz-text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: inset 0 2px 4px rgba(119,200,234,.5);
  -moz-box-shadow: inset 0 2px 4px rgba(119,200,234,.5);
  -webkit-box-shadow: inset 0 2px 4px rgba(119,200,234,.5);
  min-width: 139px;
}
.picture-upload .button.hover {
  background: #37acde !important;
  background: -moz-linear-gradient(100% 100% 90deg, #117ba7, #37acde) !important;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#37acde), to(#117ba7)) !important;
  background: -webkit-linear-gradient(#37acde, #117ba7) !important;
  background: -o-linear-gradient(#37acde, #117ba7) !important;
}