jQuery FILE Uploadをネストされたフォームで使用するにはどうすればよいですか？

Question

新しいレールプロジェクトでhttps://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5を使用しようとしています。私は複数のファイルが添付されたassignmentsというオブジェクトを作りたいと思っています。

アップロードするファイルのネストフォームを持つ課題のフォームを作成するにはどうすればよいですか？

Answer 1

このプラグインのchange input [type = file]情報フォームは、他のフォームの中にあるときは無効です。私はこれを解決した：外側のフォームは<div id="form">に変更されました。私はあなたがフォームを送信する前に、サーバー側で何とかアップロードを管理する必要がもちろん

$.post(url, $('#form *').serialize(), function(response){...}, 'json') 

でjQueryを経由してフォームを送信します。

Answer 2

私はこれをしなかった方法は、単にファイルをアップロードするための私のメインフォームの外に別のフォームを追加することです：

= s3_uploader_form post: void_url, as: "photo_url", id: "photo_upload" do 
    = file_field_tag "file", multiple: true 

= form_for @model do |f| 
    ... 
    = f.fields_for :children do |child_fields| 
    = file_field_tag :"#{child_id}_file", multiple: true 

その後、私はそうのように、両方のフォームにファイルアップロードプラグインの一部をフック：

$("#photo_upload").fileupload 
    add: (e, data) -> 
    data.submit() 

    done: (e, data) -> 
    file = data.files[0] 

// For each child 
$("##{child_id}_file").fileupload 
    dropzone: $("##{child_id}_dropzone") 
    add: (e, data) -> 
    # Upload the file using the external upload form with the proper form action and fields 
    $rootPhotoUploadForm.fileupload('add', { files: [file], child_id: child_id }) 

基本的には、jQuery-File-Upload's APIを使用して外部アップロードフォームからファイルをアップロードします。

外部アップロードフォームに「追加」をトリガするときにchild_idを含めるので、どの子がファイルアップロードをトリガしたのか分かります。その値は各コールバックの変数dataで利用できます。

多くのアプリケーション固有のコードがあるので、私は抽象化しましたが、うまくいけばそれを理解することができます。