How to get FB profile photo in devise new user form

gistfile1.txt

## routes.rb 

Rails.application.routes.draw do
  devise_for :users, controllers: {registrations: 'registrations', omniauth_callbacks: 'omniauth_callbacks'}
  root 'pages#home'
end

##config/initalizers/devise.rb 

  config.omniauth :facebook, 'your-app-key', "your-secret-key", :image_size => 'large'

## controllers/omniauth_callbacks_controller.rb 

class OmniauthCallbacksController < Devise::OmniauthCallbacksController
  respond_to :js, :html

  def facebook
    @remote_avatar = request.env["omniauth.auth"]["info"]["image"]
    redirect_to new_user_registration_path(:remote_avatar => @remote_avatar)
  end
end

## devise/registrations/new.html.erb 

<h2>Sign up</h2>

<%= form_for(@user, url: user_registration_path) do |f| %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @validatable %>
    <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation %><br />
    <%= f.password_field :password_confirmation, autocomplete: "off" %>
  </div>

  <div class="field">
       <%= f.label :avatar  %><br />
       <%= f.file_field :avatar, id: 'pictureInput' %>
   </div>

   <div class="field">
     <%= f.hidden_field :remote_avatar, id: 'remote-avatar' %>
   </div>

   <div class="field">
     <%= link_to 'Use my Facebook avatar', user_omniauth_authorize_path(:facebook), class: 'btn btn-primary btn-sm' %>
     <%= link_to 'Cancel', '#', class: 'btn btn-default btn-sm', id: 'cancel-avatar' %>
   </div>
   <div id="target" style="width: 100px; height: 100px; background: #e4e4e4; border: 1px solid black;"></div><br />

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

<script>

$(function() {
  $('#pictureInput').on('change', function(event) {
    var files = event.target.files;
    var image = files[0]
    var reader = new FileReader();
    reader.onload = function(file) {
      var img = new Image();
      img.width = 100;
      console.log(file);
      img.src = file.target.result;

      $('#target').html(img);
    }
    reader.readAsDataURL(image);
    console.log(files);
  });

  console.log("<%= params[:remote_avatar] %>");
  if ("<%= params[:remote_avatar] %>") {

    if ($('#target').find('img').length > 0) {
      $('#target').find('img').src = "<%= params[:remote_avatar] %>";
      $('#remote-avatar').val("<%= params[:remote_avatar] %>");

    } else {
      var img = new Image();
      img.width = 100;
      img.src = "<%= params[:remote_avatar] %>";
      $('#target').html(img);
      $('#remote-avatar').val("<%= params[:remote_avatar] %>");
    }
  }

  $('#cancel-avatar').click(function() {
    $('#remote-avatar').val('');
    $('#target').find('img').attr('src', '');
  })

});
</script>

##user.rb 

class User < ActiveRecord::Base

  attr_accessor :avatar
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable,  :validatable,
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :omniauthable, :omniauth_providers => [:facebook]

  has_attached_file :avatar, :styles => { :medium => "300x300>", :thumb => "100x100#" }, :default_url => "/images/:style/missing.png"
  validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
  crop_attached_file :avatar

end