How do I use jQuery FIle Upload in a nested form?

Question

I'm trying to use https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V5 in my new rails project. I want to make objects called assignments that have multiple files attached to them.

How do I make a form for an assignment that has a nest form for the files being uploaded?

Answer 1

This plugin change input[type=file] info form and when it's inside other form it's invalid. I solved this: the outer form I changed to <div id="form">. I submit form via jQuery with

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

Of course you have to manage uploads somehow on server-side before submitting form.

Answer 2

The way I did this is to add a separate form outside of my main form just for uploading files:

= 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

Then I hook part of the fileupload plugin to both forms, like so:

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

Basically, I use jQuery-File-Upload's API to upload the file from an external upload form.

Note that I include the child_id when triggering the 'add' on the external upload form so that I know which child has triggered a file upload. That value is available in the data variable in each callback.

I have abstracted a lot as there's a lot of application specific code, hopefully you can figure it out from there.