Ajaxで画像データのPostについて

Question

こんにちは。

Rails4、Ajaxで非同期に画像を登録する処理を作成しています。
formで画像が選択されたことをAjaxで検知して、controllerへPostしたいです。

以下のようにコードを書いています。

<!--画像登録用ボタン-->
<input type="file" accept="image/*" id="imputImage" />


<!-- 画像登録用JS -->
<script>
	$(function() {
		$('#imputImage').change(function() {
			var fd = new FormData($('#imputImage').get(0));
			$.ajax({
				url : '/blog_images',
				type : "POST",
				data : fd,
				processData : false,
				contentType : false,
			});
		});
	});
</script>

ですが、上記の状態でformで画像を選択しても500エラーとなります。

サーバ側のログは以下の通りです。

[2015-05-06 13:39:51] ERROR EOFError: bad content body
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:74:in `block in fast_forward_to_first_boundary'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:72:in `loop'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:72:in `fast_forward_to_first_boundary'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/multipart/parser.rb:15:in `parse'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/multipart.rb:25:in `parse_multipart'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/request.rb:377:in `parse_multipart'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/request.rb:203:in `POST'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:26:in `method_override'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/methodoverride.rb:14:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/runtime.rb:17:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/activesupport-4.1.4/lib/active_support/cache/strategy/local_cache_middleware.rb:26:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/lock.rb:17:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/actionpack-4.1.4/lib/action_dispatch/middleware/static.rb:64:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/sendfile.rb:112:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/railties-4.1.4/lib/rails/engine.rb:514:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/railties-4.1.4/lib/rails/application.rb:144:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/lock.rb:17:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/content_length.rb:14:in `call'
        /opt/ruby/lib/ruby/gems/2.1.0/gems/rack-1.5.2/lib/rack/handler/webrick.rb:60:in `service'
        /opt/ruby/lib/ruby/2.1.0/webrick/httpserver.rb:138:in `service'
        /opt/ruby/lib/ruby/2.1.0/webrick/httpserver.rb:94:in `run'
        /opt/ruby/lib/ruby/2.1.0/webrick/server.rb:295:in `block in start_thread'

正しくhttpリクエストを作成できていないのではないかと思っていのですが、どうしてよいものかいきづまってしまい。。。
お教えいただけると幸いです。
よろしくお願いします。!!

Answer 1

やり方いろいろあるとおもいますが、
formを使うのであれば、form属性にmultipartをつけないとファイルは送れないです。

こんなかんじですね。
<%= form_for(@image,
url: upload_image_path,
html: {multipart: true},
remote: true) do |image| %>

Answer 2

しばらくPHP でのアップロードを試していましたが、jQuery 標準のAjax での送信はできませんでした(同様のエラーが出ました)
jQuery Form Plugin のajaxSubmit() で動作させることが出来ました

以下Rails 用に書き換えてみました

前提：

• アップロード機能にCarrierwave
• 新規作成からrails g scaffold user name:string image:string
• テンプレートエンジン Slim
• CoffeeScript

(適宜読み替えをお願いします)

ファイルの編集

app/views/layouts/application.html.slim :

  /form プラグインの読み込みを追加
  = javascript_include_tag "http://malsup.github.com/jquery.form.js", 'data-turbolinks-track' => true

app/views/users/new.html.slim :

h1 New user

/== render 'form'

/#new_user が挿入された状態で展開される
= form_for @user do |f|
  p
    = f.label :name, 'Name'
    = f.text_field :name
  p
    = f.label :image, 'Image'
    = f.file_field :image /#user_image が挿入された状態で展開される
  p
    = f.submit

= link_to 'Back', users_path

app/assets/javascripts/users.new.coffee :

# @ == this 相当
# $(document).ready(function () {})
$ ->
  $('#new_user #user_image').on 'change', ->
    console.log('on submit') # debug print
    $(@).submit()
  $('#new_user').on 'submit', (e) ->
    e.preventDefault()
    $(@).ajaxSubmit()
    console.log('ajaxSubmit') # debug print

動作確認

Rails server を立ち上げて、localhost:3000/users/new にアクセスし、ファイルを選択する

以上 何か参考になれば幸いです

Link

• jQuery Form Plugin
• CoffeeScript
• Slim - A Fast, Lightweight Template Engine for Ruby
• event.preventDefault - Web API インターフェイス | MDN

Comments

[GOROGORO]

ありがとうございます!!
jQuery Form Pluginを使ってPost送ることができました!!
こんなのあるのですね。。。
はじめて知りました。

Answer 3

画像の場合は、下記で行けると思います。

data: {
 'file': fd.val()
},