All threads / How can I add an avatar using (Carrierwave) to the ActionCable Chatroom Project?

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How can I add an avatar using (Carrierwave) to the ActionCable Chatroom Project?

Darion Wood asked in Rails

The code that I have below is for the _message.html.erb partial

<div class="media">
  <% if message.user.user_profile.avatar.profile_thumb.present? %>
    <%= image_tag message.user.user_profile.avatar.profile_thumb, class: "d-flex align-self-start mr-3 img-thumbnail rounded" %>
  <% else %>
    <img class="d-flex align-self-start mr-3 purple-rounded rounded" src="http://via.placeholder.com/30x30">
  <% end %>
  <div class="media-body">
    <h5 class="mt-0">
      <%= message.user.username %>
    </h5> 
    <p>
      <%= message.body %>
    </p>
  </div>
</div>

The code below is from chatroom.coffee file.

App.chatrooms = App.cable.subscriptions.create "ChatroomsChannel",
  connected: ->
# Called when the subscription is ready for use on the server

  disconnected: ->
# Called when the subscription has been terminated by the server

  received: (data) ->
    active_chatroom = $("[data-behavior='messages'][data-chatroom-id='#{data.chatroom_id}']")
    if active_chatroom.length > 0

      if document.hidden
        if $(".strike").length == 0
          active_chatroom.append("<div class='strike'><span>Unread Messages</span></div>")

        if Notification.permission == "granted"
          new Notification(data.username, {body: data.body})

      else
        App.last_read.update(data.chatroom_id)

      # Insert the message
      active_chatroom.append("<div class='media'><div class='media-body'><h5 class='mt-0'>#{data.username}</h5> <p>#{data.body}</p></div></div>")

    else
      $("[data-behavior='chatroom-link'][data-chatroom-id='#{data.chatroom_id}']").css("font-weight", "bold")

  send_message: (chatroom_id, message) ->
    @perform "send_message", {chatroom_id: chatroom_id, body: message}

The message body and user name appends correctly. But, I have to refresh to see the user avatar or the placeholder image. It does not insert the entire partial view. I've been working hard to figure this out, and now I'm puzzled.

Care to help me out? Thanks

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,699+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.