I'm trying to get Cloudinary direct uploads working on a Rails app using Carrierwave and accepts_nested_attributes_for to submit one or more images with a post. It works fine until I try to dynamically add more upload fields. For some reason those added dynamically won't start uploading when an image/file is chosen.
Details...
Models summary:
class Post < ActiveRecord::Base
has_many :images
accepts_nested_attributes_for :images,
reject_if: proc { |a| a['file'].blank? && a['file_cache'].blank? }
attr_accessible :images_attributes
end
class Image < ActiveRecord::Base
belongs_to :post
attr_accessible :file, :file_cache
mount_uploader :file, ImageUploader
end
Controller summary: (A starting point, allowing me to have up to three images with a post)
class PostsController < ApplicationController
def new
@post = Post.new
3.times { @post.images.build }
end
end
Head:
<!DOCTYPE html>
<html>
<head>
...
<%= javascript_include_tag "application" %>
<%= cloudinary_js_config %>
</head>
Gemfile:
gem 'carrierwave'
gem 'cloudinary'
Application.js:
//= require jquery
//= require jquery_ujs
//= require cloudinary
Uploader:
require 'carrierwave/processing/mime_types'
class ImageUploader < CarrierWave::Uploader::Base
include Cloudinary::CarrierWave
end
Post form:
<%= form_for @post, :html => { :class => "form" } do |f| %>
...
<div class="uploads">
<div class="field">
<%= f.fields_for :images do |builder| %>
<%= render "image_fields", f: builder %>
<% end %>
</div>
</div>
...
<%= f.submit "Save Post" %>
<% end %>
The image_fields.html.erb partial:
<div class="upload">
<%= f.label :file, "Image" %>
<%= f.hidden_field(:file_cache) %>
<%= f.cl_image_upload(:file) %>
</div>
So, this all works great. The images upload direct to Cloudinary and are saved correctly with the post form. However, I don't want a user to be limited to only having three images per post, so I adapted code from Railscast 196 to add additional upload fields with JavaScript.
The CoffeeScript:
jQuery ->
$('form').on 'click', '.add_fields', (event) ->
$list = $('.uploads')
$lis = $list.find('.upload')
newIndex = $lis.length
regexp = new RegExp($(this).data('id'), 'g')
$(this).before($(this).data('fields').replace(regexp, newIndex))
event.preventDefault()
A new add fields link: (placed underneath the fields_for and inside the div with 'uploads' class)
<%= link_to_add_fields "Add Image", f, :images %>
A new images helper:
def link_to_add_fields(name, f, association)
new_object = f.object.send(association).klass.new
id = new_object.object_id
fields = f.fields_for(association, new_object, child_index: id) do |builder|
render(association.to_s.singularize + "_fields", f: builder)
end
link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
end
This seems to work in the sense that the three originally created upload fields continue to work fine (i.e. upload immediately), and clicking the "Add Image" link does generate a new upload field with a successive ID (they are identical other than the ID).
However, the newly generated upload fields don't initiate the upload when a file is selected. Nothing happens. Anybody got any ideas why?
You need to initialize the newly created input field using $(selector).cloudinary_fileupload();