Multi-Model Forms with Image Upload

Question

Hi, I'm trying to create a poll object which has many answers. Each answer can have an image attached. How can I create a form that allows me to enter the question and add a variable number of answers (each with their attached image). I'd also preferably want to allow preview of the images uploaded.

My idea so far is to have a sub-form for each image that is auto uploaded to a preview handler for each question added.

My other approach was to create the question object in the session, and add answer objects to it, then save them all at the same time. I'm not quite sure how to achieve that in rails though. I'm using paperclip for uploading the images.

I'm a bit of a rails newbie, so any advice would be appreciated.

Answer 1

I'd highly recommend that you read these two articles about nested attributes and nested models:

• http://ryandaigle.com/articles/2009/2/1/what-s-new-in-edge-rails-nested-attributes
• http://ryandaigle.com/articles/2008/7/19/what-s-new-in-edge-rails-nested-models

If you want to create a poll with many answers using a single form, this is the way to go.

You could first ask how many answers the poll will have, and then iterate that many times over your fields_for call.

However, a better approach would be to have 'add' and 'remove' links so that you can modify the number of answers inline. I would do this using AJAX - so you might have a link_to_remote for you 'add' link that calls a controller method that does something like this:

render :update do |page|
  page.insert_html :bottom, 'answers-list', :partial => 'answer'
end

And of course for your 'remove' link you use page.remove to remove the relevant part of the form.

That should get you started anyway.

Answer 2

What about separating the poll's answers from the image upload part?

This way you can build a main form that holds the multiple answers, then for each created answer you will have a form with and upload field so you don't have to deal with multiple uploads and it's a lot easier.

You can easily hide (style="display:none") the upload forms and show them with a link like "Upload an image" (onclick="$('#link_id').show()")

I recommend you not using the session to store these informations because the prev-back (buttons) of the browsers will mess things up.