web-dev-qa-db-ja.com

Rails 4：AJAX

AJAXでファイルをアップロードしたい。過去に私は魔法の jQueryフォームプラグイン を使用してこれを達成しました、そしてそれはうまくいきました。現在、私はRailsアプリを構築していて、「Rails Way」を実行しようとしているので、フォームヘルパーとペーパークリップジェムを使用して追加しています添付ファイル。

Rails docs フォームヘルパーがAJAXファイルのアップロードに対して機能しないことを警告します：

他のフォームとは異なり、非同期ファイルアップロードフォームを作成することは、form_forにremote：trueを提供するほど単純ではありません。 Ajaxフォームでは、シリアル化はブラウザ内で実行されているJavaScriptによって実行され、JavaScriptはハードドライブからファイルを読み取ることができないため、ファイルをアップロードできません。最も一般的な回避策は、フォーム送信のターゲットとして機能する非表示のiframeを使用することです。

既成の解決策がないことは明らかなようです。だから私は何をするのが最も賢いのか疑問に思っています。私にはいくつかの選択肢があるようです：

  1. フォームヘルパーとiframeトリックを使用します。
  2. フォームヘルパーを使用し、jQueryフォームプラグインをロードしてファイルを送信します（これがRailsの認証トークンなどでNiceを再生するかどうかはわかりません）
  3. フォームヘルパー+ペーパークリップ+ [その他のgem]を使用して機能を拡張し、AJAXフォーム送信を許可します。

3つすべてが可能のようです。私は＃3、特に[他の宝石]の部分についてはほとんど知りません。 Uploadifyと呼ばれるPic-Uploadのブランチについて言及している2つの同様の質問（ this と this ）を見つけましたが、どちらも2歳で、Rails 2と3（そしてUploadifyは何年も更新されていません）。したがって、どれだけ変更されたかを考えると、これはまったく新しい質問だと思います。

AJAX in Rails 4でファイルをアップロードする最良の方法は何ですか？

ruby-on-railsrubyajaxfile-uploadruby-on-rails-4
18
emersonthis

remotipart gemを調べてください： https://github.com/JangoSteve/remotipart -ほんの少しの作業でそこまでたどり着くかもしれません！

8
pdobb

IMHO Railsは、AJAXを使用してアップロードファイルを処理する場合、特にプログレスバーが必要な場合は完璧ではありません。私の提案は、（2）で提案したように、AJAXリクエストを介したフォーム送信にJavascriptを使用することです。 Javascriptに慣れている場合は、多くの問題は発生しません。

私は最近、この非常に単純なJSライブラリを使用して同じアプローチを使用しました https://github.com/hayageek/jquery-upload-file そしてここに詳細を書きました http：// www .alfredo.motta.name/upload-video-files-with-Rails-Paperclip-and-jquery-upload-file /

タイトルと説明を含む映画をアップロードするフォームを備えたアプリケーションの場合、JSコードは次のようになります。

$(document).ready(function() {
  var uploadObj = $("#movie_video").uploadFile({
    url: "/movies",
    multiple: false,
    fileName: "movie[video]",
    autoSubmit: false,
    formData: {
      "movie[title]": $('#movie_title').text(),
      "movie[description]": $('#movie_description').text()
    },
    onSuccess:function(files,data,xhr)
    {
      window.location.href = data.to;
    }
  });

  $("#fileUpload").click(function(e) {
    e.preventDefault();
    $.Rails.disableFormElements($($.Rails.formSubmitSelector));
    uploadObj.startUpload();
  });
});

完璧にはほど遠いですが、フロントエンドに柔軟性をもたらします。

1
mottalrd