How do I use jQuery FIle Upload in a nested form?
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?
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.
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.
链接地址: http://www.djcxy.com/p/57116.html