Getting Cloudinary direct uploads to work with a nested model and dynamically added upload fields

StackOverflow https://stackoverflow.com/questions/20499631

Question

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?

Était-ce utile?

La solution

You need to initialize the newly created input field using $(selector).cloudinary_fileupload();

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top