Adding a profile image?

If you already have the paper clip gem installed how would you go about adding a image into devise registration and editing view and allow user to upload profile images that appear on the right side of the header in thumbnail size?

Posted over 5 years ago by joseph
Posted about 5 years ago by joseph

Because this feature does cause you to play around with two gems to get it to function I was wondered if you had plans in adding this feature as a screencast or adding into the next project you are teaching to build… Because I find most present day apps support this feature yet there is no up-to-date screencast I have found to date that shows how to add this functionality in with a rails app in development and production.. I think it would be a good idea to make a screencast on it and or maybe add it in as another feature for you future project to do! And have a nice place to place it in the UI like most apps today do.

0
Posted about 5 years ago by Alex Yang

You're right - I think this could be a good add-on topic for a future screencast as it's applicable to nearly any app with user profiles. Thanks for the suggestion - I'll add it to the list!

0
Posted over 5 years ago by joseph

Just for anybody else who wants to support this feature in their app the simple css rules I added to get it to look right in the nav bar along side the links was as below..you can play around and add your own css rules as well. in custom.css.scss

.image {
float: left;
margin: 5px;
}
and don't forget to add the (thumb) beside the image tag to get it to fit right.

0
Posted over 5 years ago by joseph

So far it is uploading successfully with the flash message but i just can't get it to display on the header partial in layouts..should I add a users controller due to the undefined method `image' for nil:NilClass for <%= image_tag @user.image.url (:thumb) %>

0
Posted over 5 years ago by joseph

everything is working so far but i am at the last stage of getting the image to show up in the header and stuck.. so far no luck when i place
<%= image_tag (:thumb) %>
inside the header in the views under layouts i get a broken image link showing up at the top of the header and when I place
<%= image_tag @user.image.url %> inside the header i get this error
undefined method `image' for nil:NilClass

0
Posted over 5 years ago by Alex Yang

It should look something like this: <%= image_tag current_user.image.url %>, where current_user is a special Devise keyword that pulls the currently signed in user. You'll need to do some validation though to make sure that the user is indeed signed in.

0
Posted over 5 years ago by joseph

ok perfect got it working..I'm guessing if i would like ti to fit in better i would have to give it a class then add some css rules to achieve that correct?

0
Posted over 5 years ago by Alex Yang

Exactly

0
Posted over 5 years ago by joseph

Thanks so much i always wanted to learn exactly how to add in a profile image..and you did an amazing job in explaining it so concisely ..

0
Posted over 5 years ago by Alex Yang

Thanks - you're welcome! Keep me updated on what you build (or send me a link so I can check it out!).

0
Posted over 5 years ago by joseph

Will be glad to!

0
Posted over 5 years ago by Alex Yang

Joseph, to do this you'll need to combine the process we went through in using paperclip to add an image column to our Listing database ("Section 4: Set Up Paperclip") with the process we used to add an extra name field to our Devise User database ("Section 7: Add Names to Users"). I'll provide you with a quick overview below.

First, you'll need to run the paperclip generator (e.g. 'rails generate paperclip user image'), 'rake db:migrate', and restart your Rails server. Then, make sure you edit your User model file with 'has_attached_file :image ...' and any validations or file hosting setup (e.g. Dropbox) that you need. Afterward, go to your application_controller.rb file and use the 'devise_parameter_sanitizer' method to add this image field as an approved field that Rails can accept from your user signup form (see the transcript for 'Add Names to Users'). Now add the 'f.file_field' section to your user signup form. And finally, you'll need to use 'image_tag' to display your profile image in your header (you'll probably need to apply some CSS to format it how you like).

This sounds like a lot, but if you understood the paperclip video and the devise video, then this combination of the two approaches shouldn't be too tough to figure out. Hope that helps!

0
Posted over 5 years ago by joseph

Alright so any time you want to add the paperclips gem to another part of your app you need to run the generator for the exact 'thing' you want to add an image to, in this instance the profile of the user?

0
Posted over 5 years ago by Alex Yang

Yes

0
Posted over 5 years ago by joseph

Perfect! thanks so much.

0
Posted over 5 years ago by joseph

would i added into the config params like this

def configure_permitted_parameters
devise_parameter_sanitizer.for(:sign_up) << :name, <<:image #add it in like that beside the name?
devise_parameter_sanitizer.for(:account_update) << :name, << :image
end

is the way i added the image into the permitted params the right way to do it?

0
Posted over 5 years ago by Alex Yang

You should just add another line, like this:
devise_parameter_sanitizer.for(:sign_up) << :name
devise_parameter_sanitizer.for(:sign_up) << :image

0