学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Rails6.0 | 仕事売買サイトの構築 | 51 | メッセージと会話| コメントへのファイル添付

[50]メッセージと会話| リアルタイムコメント << [ホームに戻る] >> [52]フルカレンダー


コメントにファイルを添付できるようにします。


「app\models\comment.rb」に以下の記述を追加します。


記述追加 app\models\comment.rb(5行目)

has_one_attached :attachment_file



app\models\comment.rb

class Comment < ApplicationRecord
  belongs_to :user
  belongs_to :order

  has_one_attached :attachment_file
end



「app\controllers\comments_controller.rb」ファイルに以下の記述を追加します。


記述追加 app\controllers\comments_controller.rb

  • 21行目に「attachment_file: comment_params[:attachment_file]」の記述を追加しています。
  • 27行目に「return render json: {success: true}」の記述を追加しています。

コードをコピーしてファイルの内容を置き換えて下さい。

class CommentsController < ApplicationController
    before_action :authenticate_user!
    before_action :is_valid_order

    def create
        order = Order.find(comment_params[:order_id])

        if comment_params[:content].blank?
            # 「無効なメッセージ」とアラートを返す
            return render json: {success: false}
        end

        if order.buyer_id != current_user.id && order.seller_id != current_user.id
            return render json: {success: false}
        end

        @comment = Comment.new(
            user_id: current_user.id,
            order_id: order.id,
            content: comment_params[:content],
            attachment_file: comment_params[:attachment_file]    
        )

        if @comment.save
            #redirect_to request.referrer, notice: "コメントを送りました"
            CommentChannel.broadcast_to order, message: render_comment(@comment)
            return render json: {success: true}
        else
            #redirect_to request.referrer, alert: "コメントすることができません"
            return render json: {success: false}    
        end
    end

    private

    def render_comment(comment)
        self.render_to_string partial: 'orders/comment', locals: {comment: comment}
    end

    def comment_params
        params.require(:comment).permit(:content, :order_id, :attachment_file)
    end

    def is_valid_order
        redirect_to dashboard_path, alert: "無効です" unless Order.find(comment_params[:order_id]).present?
    end
end



「app\views\orders\_comment.html.erb」ファイルに以下の記述を追加します。


記述追加 app\views\orders\_comment.html.erb(18行目~27行目)

        <% if comment.attachment_file.attached? %>
            <p>
                <%= link_to url_for(comment.attachment_file), 
                                class: "tag small is-warning m-t-20",  
                                download: "Attachment_#{comment.attachment_file.id}" do %>
                    <i class="fas fa-paperclip fa-lg p-r-5"></i> <%= comment.attachment_file.filename %>

                <% end %>
            </p>
        <% end %>



app\views\orders\_comment.html.erb

<article class="media">
    <figure class="media-left">
        <p class="image is-64x64">
            <%= image_tag avatar_url(comment.user), class: "is-rounded" %>
        </p>
    </figure>
    <div class="media-content">
        <div class="content">
            <p>
                <strong><%= comment.user.full_name %></strong>
                <small class="is-pulled-right"><%= time_ago_in_words(comment.created_at) %></small>
                <br>
                <%= comment.content %>
                <br>
            </p>
        </div>

        <% if comment.attachment_file.attached? %>
            <p>
                <%= link_to url_for(comment.attachment_file), 
                                class: "tag small is-warning m-t-20",  
                                download: "Attachment_#{comment.attachment_file.id}" do %>
                    <i class="fas fa-paperclip fa-lg p-r-5"></i> <%= comment.attachment_file.filename %>

                <% end %>
            </p>
        <% end %>

    </div>
</article>



ブラウザ確認
http://localhost:3000/selling_orders
http://localhost:3000/buying_orders


コメントにファイル添付出来るようになりました。

コメントへのファイル添付
コメントへのファイル添付



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


[50]メッセージと会話| リアルタイムコメント << [ホームに戻る] >> [52]フルカレンダー