Question

I have a screen where a user can define new data records. There are several different fields in a data record where different images with various sizes can be added.

To make it nice for the user to add all these images I’d like to separate the image upload portion to a greyboxed view. The layout flow would become

1. Click new -> Go to new record screen
2. Edit some text fields about the object
3. Click “image manager” -> Greybox opens with links to upload various sized/shaped images depending on purpose
4. Click OK in the image manager -> Greybox closes. User finishes editing the record and saves.

Does anyone know how you would link to a view that has fields to edit an object & pass in an as-yet unsaved object for edit?

Answer 1

You didn’t quite mention if the images are part of the same model or are a relation, I will assume the latter for now. The easiest way I can think off is just having a hidden div that contains the code for the images manager. I used Facebox a number of times before and it seems to be doing the same that GreyBox did so I have used that for this semi-code.

<% form_for(@my_object) do |f| %>
 <%= f.text_field :value_a %>
 <%= f.text_field :value_b %>
 <a href="#image-manager" rel="facebox">Open image-manager</a>
 <span id="image-manager" style="display:hidden">
   <% f.fields_for(@my_object.images) do |fields| %>
     <%= fields.file_column :image_file %>
   <% end %>
 </span>
 <%= f.submit "Save form" %>
<% end %>

I hope this gives you an idea to implement your own version.