Posted at

IEだとAjaxで画像がアップロード出来ない!?

More than 3 years have passed since last update.

Fileフィールドの内容が更新(ファイルが選択)されたらAjaxでファイルをアップロードするようにしていたのですが、なぜかIEだけエラーがでてあげられない現象に遭遇しました。

Completed 400 Bad Request in 9ms

ActionController::ParameterMissing (param is missing or the value is empty: posts):
.
.
.

サーバはRailsでCarrierWaveを使っているので、Controllerはこんな感じになります。


app/controllers/posts_controller.rb

def update_image(id)

@posts = Post.find(id)
head :bad_request unless @post.update_attributes(post_params)
end

routes.rbはこんな感じです。


config/routes.rb

resources :posts do

patch 'update_image' => 'posts#update_image', as: :update_image, on: :member
end

JavascriptはformDataを使ってます。


app/assets/javascripts/posts.js

$("#input-file").change(function() {

var formData = new FormData();
var id = $(this).data('id');
$input = $('#input-file');
formData.append('post[image]', $input[0].files[0]);
$.ajax({
url: "/posts/" + id + "/update_image.js",
type: 'PATCH',
data: formData,
cache: false,
contentType: false,
processData: false,
});
});

いろいろと試した結果、routes.rbposts.jspatchputに変更したらできるようになりました:astonished:

IE10と11で大丈夫なのを確認しました。