multiple image uploads in a nested form with carrierwave

ruby-on-rails ruby-on-rails-3 carrierwave nested-forms railscasts
Holly picture Holly · Mar 24, 2013 · Viewed 7.1k times · Source

I'm following railscasts episode 381 in an attempt to allow multiple image uploads to my app with the carrierwave gem & jQuery File upload.

My app is for a college project & is set up with a hikingtrails model which has many & accepts nested attributes for a pics model.

After I set the multiple option of the file_field to true & hard-coding the input name attribute i.e. <%= form.file_field :image, multiple: true, name: "pic[image]" %>, carrierwave stops working, it doesn't upload a single file as it did before.

Could this have something to do with using nested forms? I've also tried implementing this tutorial into my app without any success.

I've also tried making both forms multi part rather than just the parent form & removing the simple_form gem that I'm using.

I've also tried removing the form partial & putting the nested form in locally but that didn't help. Perhaps it has something to do with how I'm setting the file_field to multiple as this is where the issue began.

Any suggestions or an alternative approach would really be appreciated

Models

class Pic < ActiveRecord::Base
  belongs_to :hikingtrail

  attr_accessible :img_name, :image, :remote_image_url

  mount_uploader :image, ImageUploader
end

&

class Hikingtrail < ActiveRecord::Base
  attr_accessible :description, 
                                  :duration_hours, 
                                  :duration_mins, 
                                  :meta_description, 
                                  :name, 
                                  :looped,
                                  :pics_attributes

    validates :name,  :presence => true

    has_many :pics

    accepts_nested_attributes_for :pics, :allow_destroy => :true,
    :reject_if => proc { |attrs| attrs.all? { |k, v| v.blank? } }
end

Views

hikingtrails/_form.html.erb

<% @hikingtrail.pics.build %>
<%= simple_form_for @hikingtrail, :html => {:multipart => true}  do |f| %>

<%= f.input :name %>    

<%= f.input :description, :input_html => { :cols => 10, :rows => 3 } %>

<%= f.input :looped %>


  <h2>Images</h2>
  <%= render :partial => 'pics/form',
             :locals => {:form => f} %>


  <div class="form-actions">
    <%= f.submit nil, :class => 'btn btn-primary' %>
    <%= link_to t('.cancel', :default => t("helpers.links.cancel")),
                hikingtrails_path, :class => 'btn' %>
  </div>
<% end %>

pics/_form.html.erb

<%= form.fields_for :pics do |pic_form| %>
  <div class="field">

    <% unless pic_form.object.nil? || pic_form.object.new_record? %>
    <%= image_tag pic_form.object.image_url(:thumb).to_s %>
    <% end %>

    <% if pic_form.object.nil? || pic_form.object.new_record? %>
    <%= pic_form.file_field :image, multiple: true, name: "pic[image]" %>
    <% end %>

  </div>
  <% unless pic_form.object.nil? || pic_form.object.new_record? %>
    <div class="field">
      <%= pic_form.label :_destroy, 'Remove:' %>
      <%= pic_form.check_box :_destroy %>
    </div>
  <% end %>
<% end %>

Terminal Output

Started PUT "/hikingtrails/7" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Processing by HikingtrailsController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"trGCi0Gz+CNRmwAoktcYmeplEKW5bZBtozkduNIXvcI=", "hikingtrail"=>{"name"=>"Dunran Woods", "meta_description"=>"Nice walk through the woods", "description"=>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "looped"=>"0", "duration_hours"=>"9", "duration_mins"=>"45"}, "pic"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x007f288085cc08 @original_filename="spink_sleepers.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"pic[image]\"; filename=\"spink_sleepers.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/tmp/RackMultipart20130324-7791-19ma2cb>>}, "commit"=>"Update Hikingtrail", "id"=>"7"}
  Hikingtrail Load (3.7ms)  SELECT "hikingtrails".* FROM "hikingtrails" WHERE "hikingtrails"."id" = $1 LIMIT 1  [["id", "7"]]
   (0.1ms)  BEGIN
   (0.1ms)  COMMIT
Redirected to http://0.0.0.0:3000/hikingtrails/7
Completed 302 Found in 6ms (ActiveRecord: 3.8ms)


Started GET "/hikingtrails/7" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Processing by HikingtrailsController#show as HTML
  Parameters: {"id"=>"7"}
  Hikingtrail Load (3.4ms)  SELECT "hikingtrails".* FROM "hikingtrails" WHERE "hikingtrails"."id" = $1 LIMIT 1  [["id", "7"]]
  Pic Load (0.2ms)  SELECT "pics".* FROM "pics" WHERE "pics"."hikingtrail_id" = 7
  Rendered collection (0.0ms)
  Rendered hikingtrails/show.html.erb within layouts/application (2.6ms)
  Rendered layouts/_navbar.html.erb (0.9ms)
  Rendered layouts/_footer.html.erb (0.3ms)
Completed 200 OK in 41ms (Views: 36.2ms | ActiveRecord: 3.7ms)


Started GET "/assets/application.css?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /application.css - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/bootstrap_and_overrides.css?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /bootstrap_and_overrides.css - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/jquery-fileupload/vendor/jquery.ui.widget.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/vendor/jquery.ui.widget.js - 304 Not Modified (5ms)


Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery_ujs.js - 304 Not Modified (0ms)


Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-transition.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-transition.js - 304 Not Modified (0ms)


Started GET "/assets/jquery-fileupload/jquery.fileupload.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/jquery.fileupload.js - 304 Not Modified (0ms)


Started GET "/assets/jquery-fileupload/jquery.iframe-transport.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/jquery.iframe-transport.js - 304 Not Modified (0ms)


Started GET "/assets/jquery-fileupload/basic.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /jquery-fileupload/basic.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-modal.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-modal.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-alert.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-alert.js - 304 Not Modified (0ms)
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:17] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:17 +0000
Served asset /twitter/bootstrap/bootstrap-dropdown.js - 304 Not Modified (8ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-tab.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-tab.js - 304 Not Modified (8ms)


Started GET "/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-scrollspy.js - 304 Not Modified (3ms)


Started GET "/assets/twitter/bootstrap/bootstrap-popover.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-popover.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-tooltip.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-button.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-button.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-carousel.js - 304 Not Modified (0ms)


Started GET "/assets/twitter/bootstrap/bootstrap-affix.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-affix.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-collapse.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap/bootstrap-typeahead.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/bootstrap.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /bootstrap.js - 304 Not Modified (0ms)


Started GET "/assets/twitter/bootstrap.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /twitter/bootstrap.js - 304 Not Modified (0ms)


Started GET "/assets/pics.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /pics.js - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/static_pages.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /static_pages.js - 304 Not Modified (0ms)


Started GET "/assets/hikingtrails.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /hikingtrails.js - 304 Not Modified (0ms)


Started GET "/assets/application.js?body=1" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /application.js - 304 Not Modified (2ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true


Started GET "/assets/fontawesome-webfont.woff?v=3.0.2" for 127.0.0.1 at 2013-03-24 13:55:18 +0000
Served asset /fontawesome-webfont.woff - 304 Not Modified (0ms)
[2013-03-24 13:55:18] WARN  Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true

Answer

Kyle Carlson picture Kyle Carlson · Jun 18, 2013

I spent a long time trying to implement something similar. Perhaps my answer on this post may help you.

Rails 3 + JQuery-File-Upload + Nested Model

Related questions

Displaying a Carrierwave filename in the view

I am trying to display the filename of a Carrierwave attachment in a Rails erb template. The following does not work: <%= @page.form.filename %> This seems in line with the documentation. Is some additional step needed? My page …

Read More
Carrierwave how to get the file extension

I'm developing a Ruby on Rails application that requires file uploading/downloading. For the upload part i used the gem carrierwave since it's very easy to use and flexible. The problem is: once i uploaded the file, i need to …

Read More
CarrierWave: Create the same, unique filename for all versioned files

Before I go into detail I'll get right to the point: has anyone figured out a way to get Carrierwave to save files with their names as a timestamp or any arbitrary string that is unique to each file? By …

Read More