Rails6.0 | 民泊サイトの構築（改良版）| 15 | 画像アップロード | for MacOSX

| 14 | Githubにコミットする用　<<　 [ホーム]　>>　| 16 | 電話番号カラム追加


アバター画像をアップロードできるようにします。


コマンド
rails g migration AddImageColumsToUser image


コマンド
rails active_storage:install


コマンド　マイグレーションの適用
rails db:migrate


「app\models\user.rb」ファイルに記述を追加します。


記述追加　app\models\user.rb
3行目に「has_one_attached :avatar」の記述を追加しています。

class User < ApplicationRecord

  has_one_attached :avatar
  
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :confirmable

  validates :full_name, presence: true, length: {maximum: 50}
end

ユーザ情報の書き換えに制限をかけるため、permitに「, :avatar」の記述を追加します。


記述追加　app\controllers\users_controller.rb
21行目に「, :avatar」の記述を追加しています。
カンマを忘れないようにして下さい。

class UsersController < ApplicationController

  before_action :authenticate_user!

  def dashboard
  end

  def update
    @user = current_user
    if @user.update_attributes(current_user_params)
      flash[:notice] = "保存しました"
    else
      flash[:alert] = "更新できません"
    end
    redirect_to dashboard_path
  end

  private

  def current_user_params
    params.require(:user).permit(:about, :status, :avatar)
  end
  
end

アバター画像用のヘルパーを追加します。


記述更新　app\helpers\application_helper.rb

module ApplicationHelper

    def avatar_url(user)
        if user.avatar.attached?
            url_for(user.avatar)
        elsif user.image?
            user.image
        else
            ActionController::Base.helpers.asset_path('icon_default_avatar.jpg')
        end
    end    

end

記述更新　app\views\users\dashboard.html.erb
コードをコピーしてファイルの内容を置き換えて下さい。

<div class="row" style="margin: 20px;">
    <!-- 左側 -->
    <div class="col-4">
        <div class="card">
            <div class="card-body">      
                <!-- アバター -->
                <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %>
                <!-- 画像アップロードボタン -->
                <div class="mx-auto" style="text-align: center;">
                    <h5 class="card-title btn-block" style="margin-left: 15px; margin-top: 10px;"><%= current_user.full_name %></h5>
                    <%= current_user.about %>   
                </div>
                <br/>            
                <a data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3" style="text-decoration: none;">
                    <div>
                        <strong>
                            <button type="button" class="btn btn-info btn-block"><i class="fas fa-upload"></i>アバター画像アップロード</button>
                        </strong>
                </a>
                <br/>
                        <div class="collapse" id="collapseExample3">
                            <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>
                                <%= f.file_field :avatar, class: "input-group-text", onchange: "this.form.submit();" %>
                            <% end %>   
                        </div>
                        <br/>
                    </div>

                <!-- オンラインステータス -->
                 
                <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    <div style="margin-left: 20px;">
                        <strong>
                            <% if current_user.status %>
                                <span class="btn btn-success btn-sm"><i class="toggle far fa-edit"></i>オンライン</span>
                            <% else %>
                                <span class="btn btn-danger btn-sm"><i class="toggle far fa-edit"></i>オフライン</span>
                            <% end %>
                        </strong>
                </a>
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>
                                        <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "custom-select"}) %>
                                    <br/>
                                    <br/>
                                    <%= f.submit "保存", class: "btn btn-outline-info" %>
                                <% end %>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <!-- 自己紹介 -->                                       
                    <a data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
                        <div style="margin-left: 20px;">
                            
                                <span class="btn btn-primary btn-sm"><i class="toggle far fa-edit"></i>コメント comment</span>
                            
                    </a>
                            <div class="collapse" id="collapseExample2">
                                <div class="card card-body">
                                    <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>
                                        <%= f.text_area :about, autofocus: true, autocomplete: 'form'%>
                                        <br/>
                                        <br/>
                                        <%= f.submit "保存", class: "btn btn-outline-info" %>
                                    <% end %>
    
                                </div>
                            </div>
                            <div class="mx-auto" style="margin-top: 1rem; text-align: right;">
                            <%= l(current_user.created_at, format: :long) %>
                            </div>   
                        </div>
                                
                        <!-- 電話番号 -->
            </div>
        </div>
    </div>
    <!-- 右側 -->
    <div class="col-8">
 
        <!-- お知らせ -->
        <div class="card">
            <div class="card-header">
                お知らせ
            </div>
            <div class="card-body">
                <h5 class="card-title"></h5>
                <p class="card-text"></p>
            </div>
        </div>
        <br/>
        <!-- 登録しているお部屋 -->
        <div class="card">
            <div class="card-header">
                登録しているお部屋()
            </div>
            <div class="card-body">
                <div class="row">
                </div>
            </div>
        </div>
    </div>
</div>

ナビゲーションバーを更新します。


app\views\shared\_navbar.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="z-index: 5;">
  <a class="navbar-brand" href="/"><h1 class="navh1"><font style="font-size: 1.2rem"><b>民泊予約サイト</font>　<font style="font-size: 0.9rem">Private lodging reservation site</b></font></h1></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
    <!-- もしログインしていなかったら-->
    <% if (!user_signed_in?) %>
      <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;">
        <%= link_to  "まずはユーザ登録 Sign up", new_user_registration_path, class: "btn btn-danger btn-sm" %>
      </li>
      <li class="nav-item">
        <%= link_to  "ユーザ登録がお済みの方はこちら login", new_user_session_path, class: "btn btn-info btn-sm", style: "margin-right: 80px;" %>
      </li>
    <!-- ログインしていたら　-->
    <% else %>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <figure style="position:relative; top: 0.2rem;" class="avatar <%= current_user.status ? "online" : "offline" %>"></figure>  
        <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px; margin-top: 0.5rem;" %>

        <div class="btn btn-light bg-light text-dark"><%= current_user.full_name %></div>
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <span class="dropdown-item"><i class="fas fa-user-edit"></i>&nbsp;<%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-warning" %></span>
          <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i>&nbsp;<%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-danger" %></span>
        </div>
      </li>
    <% end %>
    </ul>
  </div>
</nav>
<% if (user_signed_in?) %>
  <nav class="navbar navbar-expand-lg navbar-light bg-info" style="z-index: 3;">
    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" style="margin-top: 7px;">
        <i class="fas fa-tachometer-alt" style="color: white;"></i>&nbsp;<%= link_to 'ダッシュボード', dashboard_path, class: "btn btn-light" %>
        </li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-hospital-symbol" style="color: white;"></i>&nbsp;<div class="btn btn-light bg-light text-dark">ホスト</div>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          </div>
        </li>&nbsp;&nbsp;
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-user-friends" style="color: white;"></i>&nbsp;<div class="btn btn-light bg-light text-dark">ゲスト</div>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          </div>
        </li>
      </ul>
    </div>
  </nav>
<% end %>

ブラウザ確認
http://localhost:3000/dashboard


ドロップダウンメニューにアバター画像をつけました。
アバター画像をアップロードできるか確認して下さい。

画像アップロード

↓↓クリックして頂けると励みになります。

| 14 | Githubにコミットする用　<<　 [ホーム]　>>　| 16 | 電話番号カラム追加