Ajaxを用いた画像投稿機能作成

Question

###前提・実現したいこと
railsで簡単なchatアプリを制作しています。
画像投稿機能を実装中に以下のエラーメッセージが発生しました。

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

jquery.self-bd7ddd3….js?body=1:10074 Uncaught TypeError: Illegal invocation
    at add (jquery.self-bd7ddd3….js?body=1:10074)
    at buildParams (jquery.self-bd7ddd3….js?body=1:10062)
    at buildParams (jquery.self-bd7ddd3….js?body=1:10056)
    at buildParams (jquery.self-bd7ddd3….js?body=1:10056)
    at Function.jQuery.param (jquery.self-bd7ddd3….js?body=1:10096)
    at Function.ajax (jquery.self-bd7ddd3….js?body=1:9613)
    at HTMLInputElement.<anonymous> (message.self-b8ae95f….js?body=1:68)
    at HTMLInputElement.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLInputElement.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)
add	@	jquery.self-bd7ddd3….js?body=1:10074
buildParams	@	jquery.self-bd7ddd3….js?body=1:10062
buildParams	@	jquery.self-bd7ddd3….js?body=1:10056
buildParams	@	jquery.self-bd7ddd3….js?body=1:10056
jQuery.param	@	jquery.self-bd7ddd3….js?body=1:10096
ajax	@	jquery.self-bd7ddd3….js?body=1:9613
(anonymous)	@	message.self-b8ae95f….js?body=1:68
dispatch	@	jquery.self-bd7ddd3….js?body=1:5227
elemData.handle	@	jquery.self-bd7ddd3….js?body=1:4879

###該当のソースコード

  $('#submit').on('click', function(e){
    e.preventDefault();                     //通常の処理を止める
    var textField = $('#message');      //formのtextを取り出す
    var message = textField.val();
    var image = $("#js-file-field")[0].files[0];
    $.ajax({                                //ajaxで非同期通信の開始
      url: 'messages',
      type: 'POST',
      dataType: 'json',
      data: {
        message: {
          text: message,                      //messageの中に入れている
          image: image
        }
      }
    })

###試したこと
どこから手をつけていいかわからないので何も対策ができていないです。

###補足情報(言語/FW/ツール等のバージョンなど)
Ajaxによって実装したいです。

Comments

[m.ts10806]

Ajax,jQueryなどもタグに追加しておくとより広く回答を得られると思います。

Answer 1

おそらく、ですが...FormDataオブジェクトを利用してあげればできたきがします。

  $('#submit').on('click', function(e){
    e.preventDefault();                     //通常の処理を止める
    var formdata = new FormData(); // formDataオブジェクトでパラメーターを渡す
    var textField = $('#message');      //formのtextを取り出す
    formdata.append('message', textField.val());
    formdata.append('image', $("#js-file-field")[0].files[0]);
    
    $.ajax({                                //ajaxで非同期通信の開始
      url: 'messages',
      type: 'POST',
      dataType: 'json',
      data: formdata
    })

パラメーターをネストする方法を忘れてしまいましたが、たしか

formdata.append('message[message]', xxxx)
formdata.append('message[image]', xxxx)

とかだった気がします。ここは試してみてください。

あと、formdataオブジェクトをhtmlのformタグから取得する方法もあった気がします。コードの行数がすくなくできると思うので、調べて見てみるといいかもしれません。