【rails5】ajax通信するform_forにfile_fieldは複数使えない？

Question

ajax通信するform_forにfile_fieldを複数設置すると不具合が起きるのでしょうか？

というのも、以下のようなフォームを作成しているのですが、

= form_for(item, url: path , html:{id:'item_form', data_parsley_validate:"" ,multipart: true}, remote: true) do |f|

  .form-group
    .image_box
      label for="top_image"
        | 画像①（必須）
        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"

  .form-group
    .image_box
      label for="top_image_2"
        | 画像②（任意）
        = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer"

  .form-group
    = f.submit 'Submit', class:"btn", data: { disable_with: "Sending..." }

post→controller→jsで返ってきた際に、file_field（レンダリング後はipnut）タグのみ綺麗に位置がズレます。

具体的にいうと上記コードの画像①用のinputタグが画像②の位置のinputタグの場所に映り、画像②用のinputタグはHTML上から消えます。(下記がそのイメージです)

= form_for(item, url: path , html:{id:'item_form', data_parsley_validate:"" ,multipart: true}, remote: true) do |f|

  .form-group
    .image_box
      label for="top_image"
        | 画像①（必須）

  .form-group
    .image_box
      label for="top_image_2"
        | 画像②（任意）
        = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer"

  .form-group
    = f.submit 'Submit', class:"btn", data: { disable_with: "Sending..." }

色々挙動を確認してみたのですが、該当ページのjsを全てコメントアウトしても同様の挙動が発生し、form_forの仕様を疑っています。そもそもform_forにfile_fieldを複数使用することがご法度なのでしょうか？？

###追記

controllerで処理後に実行されるjs部分

######update.js.slim

- if @success == true
  | window.location.href = "/managements/articles/#{@article.id}/edit";

- else

  | $('.error_wrap').remove();
  | $('.alert').remove();
  | $(" #{ j( render 'managements/shared/error_messages', object: @article )}").insertAfter(".basic-info-submit-form");

ついでにcontroller部分も記載しておきます。

def update
  @item = Item.find(params[:id])
  if @item.update(item_params)
    @sussess = true
    respond_to do |format|
      format.js { flash[:info] = '情報が更新されました。' }
    end
  else
    respond_to do |format|
      format.js
    end
  end
end

Answer 1

ソースは読んでいないのですが、ファイル送信処理をajax非同期通信で行う場合は、remotipartというgemを使います

https://kei178.me/programming/214/

https://github.com/JangoSteve/remotipart/blob/master/README.rdoc

rails5だと動かないというような記事もありますが、前に動いたような気もするので、試してみる価値はあると思います。

ソースに問題がないか見てもらいたい場合は、js部分のソースも掲載しておくと良いと思います。

Comments

[gogoackman3]

ありがとうございます。remotipartはすでに使っていて、ファイルの送信は問題なく行えています。問題なのは、controllerからレスポンスを受け取ってエラーを表示する際です。本来はエラーだけ表示する処理（本文最後に追記）を書いているので、エラー表示のみでOKなのですが、なぜかinput type="file"タグが複数あると、そのinputタグの順番が勝手に入れ替わるという点です・・・。

[siruku6]

remotipartは既に使用されていたんですね。

複数設置すると不具合が起きるとおっしゃっていることからの想像なのですが、フォーム1つであれば何の問題もなく動くということなのでしょうか？