avatar upload on profile page

CHANGELOG

@@ -13,6 +13,7 @@ v 6.2.0
   - Rake tasks for web hooks management (Jonhnny Weslley)
   - Extended User API to expose admin and can_create_group for user creation/updating (Boyan Tabakov)
   - API: Remove group
+  - Avatar upload on profile page with a maximum of 200KB (Steven Thonus)
 
 v 6.1.0
   - Project specific IDs for issues, mr, milestones

app/assets/javascripts/profile.js.coffee

@@ -16,3 +16,13 @@ $ ->
 
   $('.update-notifications').on 'ajax:complete', ->
     $(this).find('.btn-save').enableButton()
+
+
+  $('.js-choose-user-avatar-button').bind "click", ->
+    form = $(this).closest("form")
+    form.find(".js-user-avatar-input").click()
+
+  $('.js-user-avatar-input').bind "change", ->
+    form = $(this).closest("form")
+    filename = $(this).val().replace(/^.*[\\\/]/, '')
+    form.find(".js-avatar-filename").text(filename)

app/assets/javascripts/users_select.js.coffee

 $ ->
   userFormatResult = (user) ->
-    avatar = gon.gravatar_url
-    avatar = avatar.replace('%{hash}', md5(user.email))
-    avatar = avatar.replace('%{size}', '24')
-
+    if user.avatar
+      avatar = user.avatar.url
+    else
+      avatar = gon.gravatar_url
+      avatar = avatar.replace('%{hash}', md5(user.email))
+      avatar = avatar.replace('%{size}', '24')
     markup = "<div class='user-result'>"
     markup += "<div class='user-image'><img class='avatar s24' src='" + avatar + "'></div>"
     markup += "<div class='user-name'>" + user.name + "</div>"

app/helpers/application_helper.rb

@@ -49,6 +49,15 @@ module ApplicationHelper
     args.any? { |v| v.to_s.downcase == action_name }
   end
 
+  def avatar_icon(user_email = '', size = nil)
+    user = User.find_by_email(user_email)
+    if user && user.avatar.present?
+      user.avatar.url
+    else
+      gravatar_icon(user_email, size)
+    end
+  end
+
   def gravatar_icon(user_email = '', size = nil)
     size = 40 if size.nil? || size <= 0
 

app/helpers/commits_helper.rb

@@ -108,7 +108,7 @@ module CommitsHelper
     source_name = commit.send "#{options[:source]}_name".to_sym
     source_email = commit.send "#{options[:source]}_email".to_sym
     text = if options[:avatar]
-            avatar = image_tag(gravatar_icon(source_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "")
+            avatar = image_tag(avatar_icon(source_email, options[:size]), class: "avatar #{"s#{options[:size]}" if options[:size]}", width: options[:size], alt: "")
             %Q{#{avatar} <span class="commit-#{options[:source]}-name">#{source_name}</span>}
           else
             source_name

app/helpers/projects_helper.rb

@@ -25,7 +25,7 @@ module ProjectsHelper
     author_html =  ""
 
     # Build avatar image tag
-    author_html << image_tag(gravatar_icon(author.try(:email), opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar]
+    author_html << image_tag(avatar_icon(author.try(:email), opts[:size]), width: opts[:size], class: "avatar avatar-inline #{"s#{opts[:size]}" if opts[:size]}", alt:'') if opts[:avatar]
 
     # Build name span tag
     author_html << content_tag(:span, sanitize(author.name), class: 'author') if opts[:name]

app/models/user.rb

@@ -38,13 +38,16 @@
 #  created_by_id          :integer
 #
 
+require 'carrierwave/orm/activerecord'
+require 'file_size_validator'
+
 class User < ActiveRecord::Base
   devise :database_authenticatable, :token_authenticatable, :lockable,
          :recoverable, :rememberable, :trackable, :validatable, :omniauthable, :registerable
 
   attr_accessible :email, :password, :password_confirmation, :remember_me, :bio, :name, :username,
                   :skype, :linkedin, :twitter, :color_scheme_id, :theme_id, :force_random_password,
-                  :extern_uid, :provider, :password_expires_at,
+                  :extern_uid, :provider, :password_expires_at, :avatar,
                   as: [:default, :admin]
 
   attr_accessible :projects_limit, :can_create_group,
@@ -113,6 +116,8 @@ class User < ActiveRecord::Base
 
   validate :namespace_uniq, if: ->(user) { user.username_changed? }
 
+  validates :avatar, file_size: { maximum: 100.kilobytes.to_i }
+
   before_validation :generate_password, on: :create
   before_validation :sanitize_attrs
 
@@ -150,6 +155,8 @@ class User < ActiveRecord::Base
     end
   end
 
+  mount_uploader :avatar, AttachmentUploader
+
   # Scopes
   scope :admins, -> { where(admin:  true) }
   scope :blocked, -> { with_state(:blocked) }

app/views/admin/users/show.html.haml

@@ -20,7 +20,7 @@
       .title
         Account:
         .pull-right
-          = image_tag gravatar_icon(@user.email, 32), class: "avatar s32"
+          = image_tag avatar_icon(@user.email, 32), class: "avatar s32"
       %ul.well-list
         %li
           %span.light Name:

app/views/dashboard/issues.atom.builder

@@ -12,7 +12,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
       xml.link    :href => project_issue_url(issue.project, issue)
       xml.title   truncate(issue.title, :length => 80)
       xml.updated issue.created_at.strftime("%Y-%m-%dT%H:%M:%SZ")
-      xml.media   :thumbnail, :width => "40", :height => "40", :url => gravatar_icon(issue.author_email)
+      xml.media   :thumbnail, :width => "40", :height => "40", :url => avatar_icon(issue.author_email)
       xml.author do |author|
         xml.name issue.author_name
         xml.email issue.author_email

app/views/dashboard/show.atom.builder

@@ -17,7 +17,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
         xml.link    :href => event_link
         xml.title   truncate(event_title, :length => 80)
         xml.updated event.created_at.strftime("%Y-%m-%dT%H:%M:%SZ")
-        xml.media   :thumbnail, :width => "40", :height => "40", :url => gravatar_icon(event.author_email)
+        xml.media   :thumbnail, :width => "40", :height => "40", :url => avatar_icon(event.author_email)
         xml.author do |author|
           xml.name event.author_name
           xml.email event.author_email

app/views/events/_event.html.haml

@@ -4,7 +4,7 @@
       #{time_ago_in_words(event.created_at)} ago.
 
     = cache event do
-      = image_tag gravatar_icon(event.author_email), class: "avatar s24", alt:''
+      = image_tag avatar_icon(event.author_email), class: "avatar s24", alt:''
 
       - if event.push?
         = render "events/event/push", event: event

app/views/groups/issues.atom.builder

@@ -12,7 +12,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
       xml.link    :href => project_issue_url(issue.project, issue)
       xml.title   truncate(issue.title, :length => 80)
       xml.updated issue.created_at.strftime("%Y-%m-%dT%H:%M:%SZ")
-      xml.media   :thumbnail, :width => "40", :height => "40", :url => gravatar_icon(issue.author_email)
+      xml.media   :thumbnail, :width => "40", :height => "40", :url => avatar_icon(issue.author_email)
       xml.author do |author|
         xml.name issue.author_name
         xml.email issue.author_email

app/views/groups/show.atom.builder

@@ -16,7 +16,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
         xml.link    :href => event_link
         xml.title   truncate(event_title, :length => 80)
         xml.updated event.created_at.strftime("%Y-%m-%dT%H:%M:%SZ")
-        xml.media   :thumbnail, :width => "40", :height => "40", :url => gravatar_icon(event.author_email)
+        xml.media   :thumbnail, :width => "40", :height => "40", :url => avatar_icon(event.author_email)
         xml.author do |author|
           xml.name event.author_name
           xml.email event.author_email

app/views/layouts/_head_panel.html.haml

@@ -37,4 +37,4 @@
             %i.icon-signout
         %li
           = link_to current_user, class: "profile-pic", id: 'profile-pic' do
-            = image_tag gravatar_icon(current_user.email, 26), alt: ''
+            = image_tag avatar_icon(current_user.email, 26), alt: ''

app/views/profiles/show.html.haml

-= image_tag gravatar_icon(@user.email, 60), alt: '', class: 'avatar s60'
+= image_tag avatar_icon(@user.email, 60), alt: '', class: 'avatar s60'
 %h3.page-title
   = @user.name
   %br
@@ -12,7 +12,7 @@
         Logout
 %hr
 
-= form_for @user, url: profile_path, method: :put, html: { class: "edit_user form-horizontal" }  do |f|
+= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" }  do |f|
   -if @user.errors.any?
     %div.alert.alert-error
       %ul
@@ -29,7 +29,7 @@
         = f.label :email, class: "control-label"
         .controls
           = f.text_field :email, class: "input-xlarge", required: true
-          %span.help-block We also use email for avatar detection.
+          %span.help-block We also use email for avatar detection if no avatar is uploaded.
       .control-group
         = f.label :skype, class: "control-label"
         .controls= f.text_field :skype, class: "input-xlarge"
@@ -39,6 +39,17 @@
       .control-group
         = f.label :twitter, class: "control-label"
         .controls= f.text_field :twitter, class: "input-xlarge"
+      .control-group
+        = f.label :avatar, class: "control-label"
+        .controls
+          .profile-avatar-form-option
+            %a.choose-btn.btn.btn-small.js-choose-user-avatar-button
+              %i.icon-paper-clip
+              %span Choose File ...
+             
+            %span.file_name.js-avatar-filename File name...
+            = f.file_field :avatar, class: "js-user-avatar-input hide"
+          %span.help-block The maximum file size allowed is 200KB.
       .control-group
         = f.label :bio, class: "control-label"
         .controls
@@ -53,7 +64,7 @@
             %p You can change your password on the Account page
           - if Gitlab.config.gravatar.enabled
             %li
-              %p You can change your avatar at #{link_to "gravatar.com", "http://gravatar.com"}
+              %p You can upload an avatar here or change it at #{link_to "gravatar.com", "http://gravatar.com"}
 
           - if Gitlab.config.omniauth.enabled && @user.provider?
             %li

app/views/projects/branches/_branch.html.haml

@@ -24,7 +24,7 @@
   %p
     = link_to project_commit_path(@project, commit.id), class: 'commit_short_id' do
       = commit.short_id
-    = image_tag gravatar_icon(commit.author_email), class: "avatar s16", alt: ''
+    = image_tag avatar_icon(commit.author_email), class: "avatar s16", alt: ''
     %span.light
       = gfm escape_once(truncate(commit.title, length: 40))
     %span

app/views/projects/commits/show.atom.builder

@@ -12,7 +12,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
       xml.link    :href => project_commit_url(@project, :id => commit.id)
       xml.title   truncate(commit.title, :length => 80)
       xml.updated commit.committed_date.strftime("%Y-%m-%dT%H:%M:%SZ")
-      xml.media   :thumbnail, :width => "40", :height => "40", :url => gravatar_icon(commit.author_email)
+      xml.media   :thumbnail, :width => "40", :height => "40", :url => avatar_icon(commit.author_email)
       xml.author do |author|
         xml.name commit.author_name
         xml.email commit.author_email

app/views/projects/issues/_issues.html.haml

@@ -52,7 +52,7 @@
             - @project.team.members.sort_by(&:name).each do |user|
               %li
                 = link_to project_filter_path(assignee_id: user.id) do
-                  = image_tag gravatar_icon(user.email), class: "avatar s16", alt: ''
+                  = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
                   = user.name
 
         .dropdown.inline.prepend-left-10

app/views/projects/issues/index.atom.builder

@@ -12,7 +12,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
       xml.link    :href => project_issue_url(@project, issue)
       xml.title   truncate(issue.title, :length => 80)
       xml.updated issue.created_at.strftime("%Y-%m-%dT%H:%M:%SZ")
-      xml.media   :thumbnail, :width => "40", :height => "40", :url => gravatar_icon(issue.author_email)
+      xml.media   :thumbnail, :width => "40", :height => "40", :url => avatar_icon(issue.author_email)
       xml.author do |author|
         xml.name issue.author_name
         xml.email issue.author_email

app/views/projects/merge_requests/index.html.haml

@@ -35,7 +35,7 @@
               - @project.team.members.sort_by(&:name).each do |user|
                 %li
                   = link_to project_filter_path(assignee_id: user.id) do
-                    = image_tag gravatar_icon(user.email), class: "avatar s16", alt: ''
+                    = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
                     = user.name
 
           .dropdown.inline.prepend-left-10

app/views/projects/milestones/_issues.html.haml

@@ -8,4 +8,4 @@
         = link_to_gfm truncate(issue.title, length: 40), [@project, issue]
         - if issue.assignee
           .pull-right
-            = image_tag gravatar_icon(issue.assignee.email, 16), class: "avatar s16"
+            = image_tag avatar_icon(issue.assignee.email, 16), class: "avatar s16"

app/views/projects/milestones/show.html.haml

@@ -99,7 +99,7 @@
       - @users.each do |user|
         %li
           = link_to user, title: user.name, class: "dark" do
-            = image_tag gravatar_icon(user.email, 32), class: "avatar s32"
+            = image_tag avatar_icon(user.email, 32), class: "avatar s32"
             %strong= truncate(user.name, lenght: 40)
             %br
             %small.cgray= user.username

app/views/projects/network/show.json.erb

@@ -9,7 +9,7 @@
         author: {
           name: c.author_name,
           email: c.author_email,
-          icon: gravatar_icon(c.author_email, 20)
+          icon: avatar_icon(c.author_email, 20)
         },
         time: c.time,
         space: c.spaces.first,

app/views/projects/notes/_discussion.html.haml

@@ -8,7 +8,7 @@
       = link_to "javascript:;", class: "js-details-target turn-off js-toggler-target" do
         %i.icon-eye-open
         Show discussion
-    = image_tag gravatar_icon(note.author_email), class: "avatar s32"
+    = image_tag avatar_icon(note.author_email), class: "avatar s32"
     %div
       = link_to_member(@project, note.author, avatar: false)
       - if note.for_merge_request?

app/views/projects/notes/_note.html.haml

@@ -13,7 +13,7 @@
         = link_to project_note_path(@project, note), title: "Remove comment", method: :delete, confirm: 'Are you sure you want to remove this comment?', remote: true, class: "danger js-note-delete" do
           %i.icon-trash.cred
           Remove
-    = image_tag gravatar_icon(note.author_email), class: "avatar s32"
+    = image_tag avatar_icon(note.author_email), class: "avatar s32"
     = link_to_member(@project, note.author, avatar: false)
     %span.note-last-update
       = note_timestamp(note)

app/views/projects/repositories/_feed.html.haml

@@ -11,7 +11,7 @@
     %div
       = link_to project_commits_path(@project, commit.id) do
         %code= commit.short_id
-      = image_tag gravatar_icon(commit.author_email), class: "", width: 16, alt: ''
+      = image_tag avatar_icon(commit.author_email), class: "", width: 16, alt: ''
       = gfm escape_once(truncate(commit.title, length: 40))
   %td
     %span.pull-right.cgray

app/views/projects/repositories/stats.html.haml

@@ -19,7 +19,7 @@
     %ol.styled
       - @stats.authors[0...50].each do |author|
         %li
-          = image_tag gravatar_icon(author.email, 16), class: 'avatar s16', alt: ''
+          = image_tag avatar_icon(author.email, 16), class: 'avatar s16', alt: ''
           = author.name
           %small.light= author.email
           .pull-right

app/views/projects/snippets/_snippet.html.haml

@@ -16,6 +16,6 @@
     = "##{snippet.id}"
     %span
       by
-      = image_tag gravatar_icon(snippet.author_email), class: "avatar avatar-inline s16"
+      = image_tag avatar_icon(snippet.author_email), class: "avatar avatar-inline s16"
       = snippet.author_name
       %span.light #{time_ago_in_words(snippet.created_at)} ago

app/views/projects/snippets/show.html.haml

@@ -5,7 +5,7 @@
     = "##{@snippet.id}"
     %span.light
       by
-      = image_tag gravatar_icon(@snippet.author_email), class: "avatar avatar-inline s16"
+      = image_tag avatar_icon(@snippet.author_email), class: "avatar avatar-inline s16"
       = @snippet.author_name
 %div= render 'projects/snippets/blob'
 %div#notes= render "projects/notes/notes_with_form"

app/views/projects/team_members/_team_member.html.haml

@@ -9,7 +9,7 @@
            
         = link_to project_team_member_path(@project, user), confirm: remove_from_project_team_message(@project, user), method: :delete, class: "btn-tiny btn btn-remove", title: 'Remove user from team' do
           %i.icon-minus.icon-white
-  = image_tag gravatar_icon(user.email, 32), class: "avatar s32"
+  = image_tag avatar_icon(user.email, 32), class: "avatar s32"
   %p
     %strong= user.name
   %span.cgray= user.username

app/views/snippets/_snippet.html.haml

@@ -18,6 +18,6 @@
     %span
       by
       = link_to user_snippets_path(snippet.author) do
-        = image_tag gravatar_icon(snippet.author_email), class: "avatar avatar-inline s16", alt: ''
+        = image_tag avatar_icon(snippet.author_email), class: "avatar avatar-inline s16", alt: ''
         = snippet.author_name
       %span.light #{time_ago_in_words(snippet.created_at)} ago

app/views/snippets/show.html.haml

@@ -17,7 +17,7 @@
     %span.light
       by
       = link_to user_snippets_path(@snippet.author) do
-        = image_tag gravatar_icon(@snippet.author_email), class: "avatar avatar-inline s16"
+        = image_tag avatar_icon(@snippet.author_email), class: "avatar avatar-inline s16"
         = @snippet.author_name
 
   .back-link

app/views/snippets/user_index.html.haml

 %h3.page-title
-  = image_tag gravatar_icon(@user.email), class: "avatar s24"
+  = image_tag avatar_icon(@user.email), class: "avatar s24"
   = @user.name
   %span
     \/

app/views/users/show.html.haml

 .row
   .span8
     %h3.page-title
-      = image_tag gravatar_icon(@user.email, 90), class: "avatar s90", alt: ''
+      = image_tag avatar_icon(@user.email, 90), class: "avatar s90", alt: ''
       = @user.name
       - if @user == current_user
         .pull-right

app/views/users_groups/_users_group.html.haml

 - user = member.user
 - return unless user
 %li{class: "#{dom_class(member)} js-toggle-container", id: dom_id(member)}
-  = image_tag gravatar_icon(user.email, 16), class: "avatar s16"
+  = image_tag avatar_icon(user.email, 16), class: "avatar s16"
   %strong= user.name
   %span.cgray= user.username
   - if user == current_user

db/migrate/20131005191208_add_avatar_to_users.rb

+class AddAvatarToUsers < ActiveRecord::Migration
+  def change
+    add_column :users, :avatar, :string
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20130926081215) do
+ActiveRecord::Schema.define(:version => 20131005191208) do
 
   create_table "deploy_keys_projects", :force => true do |t|
     t.integer  "deploy_key_id", :null => false
@@ -283,6 +283,7 @@ ActiveRecord::Schema.define(:version => 20130926081215) do
     t.integer  "notification_level",     :default => 1,     :null => false
     t.datetime "password_expires_at"
     t.integer  "created_by_id"
+    t.string   "avatar"
   end
 
   add_index "users", ["admin"], :name => "index_users_on_admin"

features/profile/profile.feature

@@ -22,6 +22,11 @@ Feature: Profile
     Then I change my password
     And I should be redirected to sign in page
 
+  Scenario: I edit my avatar
+    Given I visit profile page
+    Then I change my avatar
+    And I should see new avatar
+
   Scenario: My password is expired
     Given my password is expired
     And I am not an ldap user

features/steps/profile/profile.rb

@@ -22,6 +22,17 @@ class Profile < Spinach::FeatureSteps
     @user.twitter.should == 'testtwitter'
   end
 
+  step 'I change my avatar' do
+    attach_file(:user_avatar, File.join(Rails.root, 'public', 'gitlab_logo.png'))
+    click_button "Save changes"
+    @user.reload
+  end
+
+  step 'I should see new avatar' do
+    @user.avatar.should be_instance_of AttachmentUploader
+    @user.avatar.url.should == "/uploads/user/avatar/#{ @user.id }/gitlab_logo.png"
+  end
+
   step 'I try change my password w/o old one' do
     within '.update-password' do
       fill_in "user_password", with: "222333"

spec/helpers/application_helper_spec.rb

@@ -38,6 +38,24 @@ describe ApplicationHelper do
       current_action?(:baz, :bar, :foo).should be_true
     end
   end
+  
+  describe "avatar_icon" do
+    avatar_file_path = File.join(Rails.root, 'public', 'gitlab_logo.png')
+
+    it "should return an url for the avatar" do
+      user = create(:user)
+      user.avatar = File.open(avatar_file_path)
+      user.save!
+      avatar_icon(user.email).to_s.should == "/uploads/user/avatar/#{ user.id }/gitlab_logo.png"
+    end
+
+    it "should call gravatar_icon when no avatar is present" do
+      user = create(:user)
+      user.save!
+      stub!(:gravatar_icon).and_return('gravatar_method_called')
+      avatar_icon(user.email).to_s.should == "gravatar_method_called"
+    end
+  end
 
   describe "gravatar_icon" do
     let(:user_email) { 'user@email.com' }