QA@IT

file_field_tagを使ってファイルを読み込んだ後に部分テンプレートの更新を行うとTemplate is missing エラーになってしまう。

3416 PV

環境:
Rails 3.2.12
Ruby 1.9.3

タイトルの通り、file_field_tagを使ってファイルを読み込んだ後に部分テンプレートの更新を行うとTemplate is missing エラーになってしまいます。

以下のように実装しています。

view
(メインview: index.html.erb)

<%= form_tag({:action=>'upload_action'}, {:remote => true, multipart => true})%>
  <%= file_field_tag 'file_object' %>
  <%= submit_tag 'upload'%>
<% end %>

<div id = "update_area">
 <%= render :partial => 'insert', :object=>@test_value %>
</div>

(部分テンプレートview: _insert.html.erb)

<h1>
  <%= @test_value %>
</h1>

(更新処理用js: upload_action.js.erb)

$('#update_area').html("<%= escape_javascript(render (:partial => 'insert', :object=>@test_value))%>")

controller

class GamenController < ApplicationController
  def index
    @test_value = "test"
  end

  def upload_action
     @test_value = params[:file_object]
  end
end

あと、route.rbに

post "gamen/upload_action"

を追加

以上の様な実装です。
ここで何もファイルを読み込まずに'upload'ボタンを押してもエラー画面にはならないのですが、
任意のファイルを読み込んだ状態で'upload'ボタンを押すとTemplate is missing エラーでupload_actionに対応したビューが無いと怒られます。

なお、file_field_tag をtext_field_tagにし、文字を入力して@test_valueに文字を代入するような構成にした場合はうまくいきます。

類似問題を検索調査した際、海外サイトのQAではredirect_toを使えばよい、といったところもありましたが、
作ろうとしているコンテンツの仕様上、これは使えません。

申し訳ありませんが上記問題の解決法をご存じの方いらっしゃいましたら、
ご教授をお願いいたします。

宜しくお願いします。

回答

:remote => true をつかった方法でファイルアップロードすることはできません。
そのため、ファイルを読み込みした場合は、非同期通信をせずに、普通に画面遷移し、 missing_template errorとなります。

この手のものは動的に を作成して、その中でファイル送信して、非同期で動作しているようにみせかけるそうです。

ざっくりと gem を探してみましたが remotepart というのがダウンロード数が多いようでした。

補足ですが、asset pipeline を利用している場合、upload_action.js.erb はうまく動作しないので注意してください。

あらかじめ formに upload_action という id を付加しておいていれば、

$('#upload_action').on('ajax:success', function (event, html) {
    $('#update_area').html(html);
});

のような書き方になります。

ajaxの通信が成功した時 upload_action で 表示する html が入っていますので、これを差し替えます。upload_action.html.erbrender (:partial => 'insert', :object=>@test_value) しておけばよいでしょう。

他にもやることはありますが本題から外れるので、割愛します。

編集 履歴 (0)
  • eielさん

    ご回答ありがとうございます。
    eielさん

    ご回答ありがとうございます。
    remotipartの使用により期待したものを作ることができました。

    また、missing_template errorの原因についても詳細な解説を付けていただき勉強になりました。
    -
  • 上記コメント、変な文章になってしまいましたね。修正できない。すいません。。。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。