Rails, Carrierwave and simple_form - how to upload multiple images?

[ChimKan.com]

I'm using Rails 3.2, Carrierwave and simple_form.

Currently, everything is working fine with one image upload with the following code:

<%  @product.images.build if @product.images.blank? %>
<%= f.simple_fields_for :images do |img| %>
  <% unless @product.images.first.file.blank? %>
      <div class="control-group">
         <label class="controls"><%= image_tag @product.images.first.file %></label>
      </div>   
      <%= img.input :_destroy, :label => "Remove", :as => :boolean %>
  <% end %>
      <%= img.input :file, :as => :file, :label => "Picture", input_html: { class: "input-hundredpercent" } %>
<% end %>

However, how can I turn this nested form for multi image upload?

Image model is polymorphic and product model already has accepts_nested_attributes_for and it has images_attributes in attr_accessible.

I'm scratching my head in how to turn this into multi image upload and at the same time, showing the existing images.

[Dustin]

Well, off hand it looks like you're only building product image 1 time. I'm implementing something similar with https://github.com/blueimp/jQuery-File-Upload and carrierwave backend.

--
You received this message because you are subscribed to the Google Groups "Hong Kong Ruby on Rails" group.
To view this discussion on the web visit https://groups.google.com/d/msg/hkror/-/yXzZdv-QkDwJ.
To post to this group, send email to hk...@googlegroups.com.
To unsubscribe from this group, send email to hkror+un...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/hkror?hl=en.

[ChimKan.com]

Thanks!

Yes, but I'm changing it to be multiple image upload.

I found out 'nested-form' gem and i'm using it in combination of simple form. 

So the current code is:

    <%= f.simple_fields_for :images do |img| %>

      <% if img.object.file? %>

        <div class="control-group">

          <div class="controls">

            <div class="polaroid" style="width: 300px;">

            <%= image_tag(img.object.file_url) if img.object.file? %>

            <h3><%= img.object.description %></h3>

            </div>

            <p></br>

            <%= img.link_to_remove "Remove", class: "btn btn-danger" %>

            </p>

          </div>

        </div>

      <% end %>

      <% unless img.object.file? %>

        <%= img.input :description, input_html: { class: "span6" } %>

        <%= img.input :file, :as => :file, :label => "Picture", input_html: { class: "input-hundredpercent" } %>

      <% end %>

    <% end %>

    <div class="control-group">

      <div class="controls">

        <%= f.link_to_add "Add a picture.", :images, class: "btn btn-primary btn-large" %>

      </div>

    </div>

And it works!

[MatthewRudy]

My plan ongoing for multiple image upload

is to create an ajax upload inside the form

each ajax upload should create an "Image" in my datastore.

on success if should append it's own id into a hidden field of "image_ids"

Assuming javascript stops you from submitting the form until uploads are finished,

then it should work fine.

[Rogério Alexandre]

Hello ChimKan!

I had a multiple image upload like this you did. (Simple form + nested_form). But it turned out not being the best way for a lot of reasons. The biggest problems in my case were that I had to upload like 10 photos associated with one property and the form ended up being great and confusing. Besides, if a validation on property failed all the input files would get blank and the customer would have to fill them up again. And the worst part, the photos are only created when i clicked on the "add property" button, so it took so much time, since the paperclip (gem to upload the photos), had to upload 10 photos (with 2mb each), resize them, and then copy them on amazon s3.

I don't know if you ran into this problems too. If you did, could you give some tips on how to solve it? (Or anyone who has any idea)

yesterday I spent a long time trying to use the @de suggestion, but i couldn't figure out how to use it with nested models on form. Since my photos has file attribute and even two others (priority:integer and main:boolean) 

 

Thanks for any help

[Jason Ong]

I'll suggest using a different form (perhaps ajax) for image upload. Check out how AirBnB does it.

http://www.youtube.com/watch?v=yhH3yngloP0

Drag and drop html5 demo with source code.

http://html5demos.com/dnd-upload

--
You received this message because you are subscribed to the Google Groups "Hong Kong Ruby on Rails" group.

To unsubscribe from this group and stop receiving emails from it, send an email to hkror+un...@googlegroups.com.

To post to this group, send email to hk...@googlegroups.com.

Visit this group at http://groups.google.com/group/hkror?hl=en.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Cheers,
JasonOng

---
about: http://bit.ly/velvetpd

twitter: http://twitter.com/jasonong

[Matthew Rudy Jacobs]

Deprecation warning.

Let's not have interesting conversations on old mailing lists.

Codeaholics ba.

[Rogério Alexandre]

Matthew, Hi!

What's your point! I mean, I'm new here and don't know exactly the rules so should I have opened another topic?

And Jason, the AirBnB is very elegant, but the jquery file upload also allows drag and drop. The thing is I'm not figuring out how I would be able to add photos in the property form so that when the property is saved all your photos will be available on my website. My photo model even have one attribute to say if its the front of the property, so this photo should be the eye catching, on the listing pages.

Thanks

You received this message because you are subscribed to a topic in the Google Groups "Hong Kong Ruby on Rails" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/hkror/RwrKChhVFx0/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to hkror+un...@googlegroups.com.

[Matthew Rudy Jacobs]

hkror isn't an active mailing list for a number of reasons;

1. the ruby community in Hong Kong is too small - at our max we got about 20 people along to the meetups, but excluded a whole load more people who weren't rubyists

2. we don't have admin access to the group settings - eg. we can't set a subject prefix like "[hkror]"

As such since early 2011, most of the active rubyists in Hong Kong have migrated over to Codeaholics,

both as a mailing list, and as a monthly meetup.