【Rails】Action Cableで画像送信をできるようにしたいです

Question

前提・実現したいこと

【環境】

• ruby-2.6.6
• Ruby on Rails 6.0.3.4

【達成したいこと】
チャット機能で 「content」 と 「image」 をリアルタイム送信をできるようにしたいです。

【現状】
「content」 送信はできております。そのため、画像送信も実装しようと思い模索中です。
Action Cable についての記事を参考にさせていただいているのですが、実装できず質問させていただきました。

モデル同士の関係は

has_many :chats, dependent: :destroy

has_many :chats, dependent: :destroy

belongs_to :user
belongs_to :team
has_one_attached :photo

です。User と Team は中間テーブルでつながっております。

発生している問題・エラーメッセージ

画像送信を実装しようとしたら画像の blob: url が content カラムに入っていしまいます。また変更の影響でコンテントを普通に遅れない状況になっております。

該当のソースコード

• JS

# app/javascript/channels/chat_channel.js

import $ from 'jquery'
import consumer from "./consumer"

const autoScroll = () => {
  let element = document.documentElement;
  let bottom = element.scrollHeight - element.clientHeight;
  window.scroll(0, bottom);
}

$(function() {
  const chatChannel = consumer.subscriptions.create({ channel: 'ChatChannel', team: $('#chats').data('team_id') }, {
    connected() {
      autoScroll();
    },

    disconnected() {
    },

    received(data) {
      debugger
      $('#chats').append(data['chat']);
      autoScroll();
    },

    speak(chat, photo) {
      debugger
      return this.perform('speak', {
        chat: chat,
        photo: photo
      });
    }

  });

  $(".form-submit").on('click', function(e){
    debugger
    if ($(".mychat_image > img") !== ('')) {
      let img = $(".mychat_image > img");
      let photo = img[0];
      chatChannel.speak(photo);
    } else if ($('.form-chat').val()) {
      let chat = $('.form-chat').val();
      chatChannel.speak(chat);
    } else if ($(".mychat_image > img") === ('') && $('.form-chat').val()) {
      let chat = $('.form-chat').val();
      let img = $(".mychat_image > img");
      let photo = img[0];
      chatChannel.speak(chat, photo);
    }

    $(".form-chat").val('')
    e.preventDefault();
  });
});

• プレビュー機能

# app/javascript/modules/preview.js

  $('#chat_photo').on('change', (e) => {
    $('.mychat_image > img').remove();
    const file = e.target.files[0];
    const blob = window.URL.createObjectURL(file);

    const blobImage = $('.mychat_image').append('<img>');
    $('.mychat_image > img').attr('src', blob);
  })

• ActionCable

# app/channels/chat_channel.rb

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "chat_channel_#{params['team']}"
  end

  def unsubscribed
  end

  def speak(data)
    Chat.create!(
      content: data['chat'],
      photo: data['photo'],
      user_id: current_user.id,
      team_id: params['team']
    )
  end
end

• ブロードキャスト

# app/jobs/chat_broadcast_job.rb
class ChatBroadcastJob < ApplicationJob
  queue_as :default

  def perform(chat, photo)
    ActionCable.server.broadcast "chat_channel_#{chat.team_id}", chat: render_chat(chat)
  end

  private

  def render_chat(chat, photo)
    # ApplicationController.renderer.render partial: 'chats/chat', locals: { chat: chat }
    renderer = ApplicationController.renderer.new(
      http_host: 'localhost:80'
    )
    renderer.render(partial: 'chats/chat', locals: { chat: chat })
  end
end

• 送信部分

# app/views/chats/index.html.haml

  .chats#chats{"data-team_id": "#{@team.id}"}
    = render @chats
  .mychat_image

  .form
    .form-input
      %label.form-image
        = image_tag 'photo.png'
        %input{type: "file", class: 'hidden', name: 'photo', id: 'chat_photo'}/
      = text_field_tag :content, nil, class: 'form-chat',placeholder: 'Aa'
      %input{type: 'submit', class: 'form-submit'}

• 部分テンプレート

# app/views/chats/_chat.html.haml

 .chat_content
   %p= chat.content
   = image_tag chat.photo, class: 'chat_image' if chat.photo.attached?

試したこと

以下参考にさせていただいた記事です。

• 【Rails6.0】ActionCableとDeviseの欲張りセットでリアルタイムチャット作成(改正版)

画像送信の方は

• ActionCableによるチャットで画像も送る

補足情報（FW/ツールのバージョンなど）

この場での質問ははじめてです。情報など足りていない場合はご指摘いただけたら幸いです。
何卒よろしくお願いいたします。