3

ajaxを使用してRailsアプリケーションにファイルをアップロードしようとしています。これを容易にするために、jQuery.remotipartgemを含めました。

// app/assets/javascripts/application.js
//= require jquery.remotipart

ファイルをアップロードするためのフォームがあります。これらのファイルはCarrierWaveによって処理されます。

<%= form_for @import, remote: true do |f| %>
  <fieldset>
    <%= f.label :file, "Attach a CSV file" %>
    <%= f.file_field :file %>
  </fieldset>
  <%= f.submit :upload %>

<% end -%>

残念ながら、ファイルを添付してフォームを送信すると、コントローラーのアクションに正しく到達しないようです。paramsハッシュはJSオブジェクトをキーとして文字列化しました。

Started POST "/file_imports" for 127.0.0.1 at 2012-11-06 01:00:49 +0000
Processing by FileImportsController#create as JS
  Parameters: {"object Object"=>{","=>{"object Object"=>{","=>{"object Object"=>nil}}}}}`

Chromeの開発ツールでは、これが実際にサーバーに送信されているフォームデータであることがわかります。

サーバーに送信されるフォームデータ

フォームを削除すると、フォームは完全に機能しremote: trueます（もちろん、その場合、JSリクエストではなくHTMLリクエストを送信します）。

誰かが私が間違っていることを知っていますか？ちなみに私はRails3.2.8とRemotipart1.0.2（最新）を使用しています。

編集：もう少し掘りました。

Remotipartのソースを調べてみると、それが何をするのか理解できないようです。たとえば、vendor/assets/javascripts/jquery.remotipart.jsの22行目は次のようになっています。

settings.data = form.serializeArray();

もう少し下に、設定はを介してサーバーに送信されます$.rails.ajax(settings)。

この$.fn.serializeArray()メソッドは、JSオブジェクトの配列を返します。それらをへの呼び出しのデータ属性に割り当てるとjQuery.ajax()、サーバーに表示されているシリアル化されたオブジェクトパラメーターが考慮されます。オブジェクトの配列ではなく、データ属性としてオブジェクトを渡す必要がありますか？

ただし、配列を1つのオブジェクトにフラット化しようとすると、すべてが壊れて、JSではなくHTMLリクエストがサーバーに送信されます。それはという事実と関係があると思いますjQuery.ajax.processData == false。

RemotipartGithubに問題があります。

4

1 に答える 1

5

たくさんのデバッグとたくさんのコードを読んだ後、私はついにRails3.2.8で動作する最新のgemを手に入れました。私は3つの落とし穴に釘付けになりました：

（1）フォームを送信する前にファイル入力フィールドを無効にしていたため、remotipartはiframe送信に含めるためにそれを無視します。ファイル入力が有効になっていることを確認する必要があります。これが、発生しているバグの直接の原因です。

（2）デバッグの過程で、最新のアップストリームソースでオーバーライドしていましたが、iframeの非表示変数jquery.iframe-transportがサポートされていません。X-Http-Acceptsremotipartgemにバンドルされているバージョンを使用する必要があります。

（3）以外のデータ型を使用している場合は、フォームにajax：completeのコールバックを接続することを忘れないでくださいscript。これは、グローバルajaxオプションでdataTypeを指定しない場合、またはフォームでdata-type属性を使用する場合のデフォルトです。

于 2012-11-07T08:06:57.380 に答える