非同期通信　画像 js

チャットアプリを作っています。非同期通信でメッセージは送信はできるのですが、画像が送れません。
送信するとcosoleに

jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10255 POST http://localhost:3000/groups/17/messages 500 (Internal Server Error)

のエラーが出てしまいます。送信した時はjsのエラーというアラートが出てきます
ご教授お願いいたします
messages.js

$(document).on('turbolinks:load',function(){
  function buildHTML(message){
    var img = message.image ? `<img src= ${ message.image }>` : "";
    var html =  `<div class="message" data-id="${message.id}" >
                  <div class="message__upper-info">
                    <p class="message__upper-info__talker">
                      ${message.user_name}
                    </p>
                    <p class="message__upper-info__date">
                      ${message.created_at}
                    </p>
                  </div>
                  <p class="message__text">
                    <div>
                      ${message.content}
                    </div>
                      ${img}
                  </p>
                </div>`
        return html ;
  }
  $('#new_message').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    $('#ajax').removeAttr('data-disable-with');
    var url = $(this).attr('action')
    $('#new_message')[0].reset();
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.messages').append(html);
      $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight});
    })
    .fail(function(){
      alert('エラー');
    })
  });


    var reloadMessages = function() {
      if(window.location.href.match(/\/groups\/\d+\/messages/)){
      last_message_id = $('.message').last().data("id");
      $.ajax({
        url: 'api/messages',
        type: 'get',
        dataType: 'json',
        data: {id: last_message_id}
      })
      .done(function(messages) {
       if(messages.length > 0){ 
          var insertHTML = '';
          messages.forEach(function (message) {
            insertHTML = buildHTML(message);
            $('.messages').append(insertHTML);
            $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight});
          })
        }
      })
      .fail(function() {
        alert('error');
      });
    };
  }
    // if (window.location.href.match(/messages/)){
      setInterval(reloadMessages, 5000);

    });

messages.controller.rb

class MessagesController < ApplicationController
  before_action :set_group

  def index
    @message = Message.new
    @messages = @group.messages.includes(:user)
  end

  def create
      @message = @group.messages.new(message_params)

      if @message.save
        respond_to do |format|
          format.html { redirect_to groups_messages_path(params[:group_id])  }
          format.json
        end
      end    
  end

  private

  def message_params
    params.require(:message).permit(:content, :image).merge(user_id: current_user.id)
  end

  def set_group
    @group = Group.find(params[:group_id])
  end
end

haml

.flash-box
.wrapper
  .chat-main
    .main-header
      .main-header__left-box
        %h2.main-header__left-box__current-group
          = @group.name
        %ul.main-header__left-box__member-list
          Menber
          - @group.users.each do |user|
            = user.name
  .messages
    = render @messages
  .form
    = form_for [@group, @message] do |f|
      = f.text_field :content, class: 'form__message', placeholder: 'type a message'
      .form__mask
        = f.label :image, class: 'form__mask__image' do
          = fa_icon 'picture-o', class: 'icon'
          = f.file_field :image, class: 'hidden'
      = f.submit 'Send', class: 'form__submit' , id: 'ajax'