Ruby on rails - 유저 프로필 등록하기

Ruby on rails - 유저 프로필 기능만들기

>1.carrier wave gem 설치

gem 'carrierwave'

bundle install 해준다.
>2. 이미지 업로더 생성

rails g uploader Image

위와 같이 만들면 app/uploaders 폴더에 image_uploader.rb 라는 파일이 생성됨

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick
​
  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog
​
  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
  .
  .
  .

라는 내용의 파일입니다.
>3.User 모델 수정

#models/user.rb
mount_uploader :image, ImageUploader

위와 같은 내용을 user.rb에 추가해준다.

주의할점은 

1) db>migrate>user(생성한 모델)의 attribute와 같아야 함. 없는 경우 선언!

2)imageuploader는 app>uploaders>image_uploader.rb 파일에 있는 class이름과 같아야함.

>4. add image to user

rails g migration AddImageToUser image:string

위와 같이 해주면 image라는 attribute가 user에 선언된다.

당연히 후에 rake db:migrate를 해줘야 한다.
>5. 이미지 업로드 관련 컨트롤러및 라우트 추가

#원하는 컨트롤러에 아래 액션을 넣어준다.  
def create
    @user = User.find(params[:user])
    @user.image = params[:image]
    @user.save
    redirect_back(fallback_location: root_path)
  end
​
위와 같은 액션을 만들어 컨트롤러에 추가해주었고,
​
#routes.rb
  post 'users/profileImage'=> 'user#create'
​
라우트는위와 같이 추가해주었다.

>6.유저 프로필 view해주는 부분

  <div class="user-container">
    <div class="user-profile">
      # user에게 이미지가 없으면 기본이미지를 띄워주고 이미지를 입력받음. 
      <% if @user.image.url.nil? %>
      <img src="/assets/img/download.png" class="user-profile-image" alt="profile">
      <p>프로필이 없습니다. 프로필을 등록해주세요</p>
      <%= form_tag '/users/profileImage', method: :post, class: 'user-profile-form',multipart: true do %>
        <input type="file" name="image" value="imgae">
        <input type="hidden" name="user" value="<%=@user.id%>">
        <input type="submit">
      <% end %>
      <% else %>
      #유저에게 등록한 이미지가 있을경우 유저의 이미지를 보여줌
      <img src="<%=@user.image.url%>" class="user-profile-image" alt="profile">
      <% end %>
    </div>

나는 위와 같이 유저 이미지 등록부분과 보여주는 부분을 구성해주었다.

끄읕!
|결과
완벽-크