Rails 4：AJAXでファイルをアップロードするには

Question

AJAXでファイルをアップロードします。過去に私は魔法のjQuery form pluginを使ってこれを達成しました。現在私はRailsアプリケーションを構築しており、 "The Rails Way"のことをやろうとしているので、Form Helperとpaperclip gemを使って添付ファイルを追加しています。

rails docsはフォームヘルパーAJAXファイルのアップロードのために動作しないことを警告：真：非同期ファイルアップロードフォームを作る他の形態とは異なり

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

市販のソリューションはありません。だから、私は何が賢明なことをするのだろうかと思います。いくつかのオプションがあるようです：

1. フォームヘルパーとiframeトリックを使用します。
2. それは機能です拡張するフォームヘルパー+クリップの+ [他のいくつかの宝石]を使用し
3. ファイル（これはRailsのの真正トークンと仲良くするかどうかわからない、など）を提出するjQueryのフォームのプラグインを読み込む+フォームヘルパーを使用しますAJAXフォームの提出を許可します。

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

AJAXを使ってRails 4でファイルをアップロードするにはどうすればよいですか？

Answer 1

remotipartの宝石を見てみましょう：https://github.com/JangoSteve/remotipart - 非常に小さな仕事であなたのすべての方法を手に入れられるかもしれません！

Answer 2

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

私は最近、この非常に単純なJSライブラリhttps://github.com/hayageek/jquery-upload-fileを使用して、同じアプローチを使用して、私はタイトル、説明とJSコードを、ムービーをアップロードするためのフォームを使用してアプリケーションのためにここにhttp://www.alfredo.motta.name/upload-video-files-with-rails-paperclip-and-jquery-upload-file/

詳細を書いたが、フォローのようになります。

$(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(); 
    }); 
}); 

しかし、あなたのフロントエンドには柔軟性があります。